vue2 yarn build打包很慢 vue打包速度很慢

转载

mob64ca1410eb61 2024-02-04 00:57:45

文章标签 vue2 yarn build打包很慢 vue.js webpack css 服务器 文章分类 Yarn 大数据

系列文章目录

https://www.webpackjs.com/plugins/limit-chunk-count-plugin/

文章目录

系列文章目录
前言
一、使用webpack压缩打包
二、开启nginx（.gz）的配置
总结

前言

随着公司OA系统管理的逐渐开发完善至上线（公司内部使用），项目打包后上传到正式服务器，页面加载速度虽然还行，但是所有资源的加载时间过长（达到了14.3秒），显然是不能接受的。于是有了以下优化。

vue2 yarn build打包很慢 vue打包速度很慢_vue2 yarn build打包很慢

一、使用webpack压缩打包

安装压缩插件

npm install --save-dev compression-webpack-plugin

修改vue.config.js配置

const CompressionWebpackPlugin = require("compression-webpack-plugin");
 const productionGzipExtensions = ["js", "css"];

配置压缩
注：我这里只截取了对于这部分配置的代码，其他的按照项目的需求进行引入相关配置就好

const vueConfig = {
 configureWebpack: {
   // webpack plugins
   plugins: [
     // Ignore all locale files of moment.js
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new webpack.DefinePlugin({
       APP_VERSION: `"${require("./package.json").version}"`,
       GIT_HASH: JSON.stringify(getGitHash()),
       BUILD_DATE: buildDate
     }),
     // 配置compression-webpack-plugin压缩
     new CompressionWebpackPlugin({
       algorithm: "gzip",
       test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
       threshold: 10240,
       minRatio: 0.8
     }),
      // maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。
      //minChunkSize: 设置 chunk 的最小大小。
     // 限制打包的个数(减少打包生成的js文件和css文件)
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 10,
       minChunkSize: 100
     })
   ],
   // if prod, add externals
   externals: isProd ? assetsCDN.externals : {}
 },

二、开启nginx（.gz）的配置

相关配置

如果是测试服务器，在你有权限的情况下你可以尝试自己配置，正式服务器的话可以找你们的后台进行相关配置

server{
    #对外发布的端口
        listen       9090;
	#对外发布的服务名
        server_name  192.168.0.xx;
        #字符集
        charset utf-8;
	#首页     
	#index index.html
    #access_log  logs/host.access.log  main;
	add_header Access-Control-Allow-Origin "192.168.0.xx";
	
	# 这一句才是重点gzip on
	gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";
}