vue-cli项目chunk-vendors.js 太大解决办法

1.安装 compression-webpack-plugin

npm i --save-dev compression-webpack-plugin@^6.1.1

2.修改vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  // ...
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  },
  // ...
}

3.nginx开启gzip

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    
    # 开启gzip start
    gzip on;
    gzip_min_length 100;
    gzip_types text/plain text/css application/xml application/javascript;
    gzip_vary on;
    # 开启gzip end

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /Users/its_wild/Documents/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    include servers/*;
}