【日常记录】使用gzip方式优化vue打包发布chunk-vendors过大问题

一个vue项目里面打包出来的chunk-vendors文件过大，每次加载都过慢，影响体验。于是需要寻求解决方案去优化它。

优化思路有2种：

1、按需加载，使用懒加载的方式，并减少没必要的模块。这种需要逐个调优。本次先不处理

2、按gzip方式来压缩文件，服务器发送到浏览器的文件是gzip文件，浏览器再进行解析。这里需要nginx配合。本次优化采用本方法。

 

流程如下：

1、vue工程里面安装插件

npm install compression-webpack-plugin@6.1.1 --save

注意这里版本号要选择6.1.1的，最新版本会有报错。

详情可以看:

https://blog.csdn.net/chengzhf/article/details/116236687

 

2、在vue.config.js里面配置插件。找到configureWebpack的plugins，往里面添加：

      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })

完整配置形如：

configureWebpack: {
    plugins: [
      // Ignore all locale files of moment.js
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_debugger: true,
            drop_console: true
          }
        },
        sourceMap: false,
        parallel: true
      }),
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  },

注意前面需要添加引用

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

 

3、配置nginx

在监听http的地方添加

    # gzip config
    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]\.";

完整示例如下：

    server {
        listen       3003;
        server_name  localhost;

        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]\.";

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\develop\dist;
            index  index.html index.htm;
            add_header Cache-Control no-store;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

 

按这个步骤配置完毕，用nginx发布之后，可以看到chunk-vendors文件小了很多，访问速度快了不少。