vue 处理打包后加载慢的问题

原因：

1、chunk-vendors文件过大

2、js没有压缩

3、服务器没有开启gzip

解决办法：

首先在build发布时候压缩js、css等资源文件

安装npm压缩组件

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

压缩js、css文件，在vue.config.js 中加入如下配置项：

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
  chainWebpack: (config) => {
    // 生产环境，开启js\css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.(js|css|less|map)$/, // 匹配文件名
        threshold: 1024, // 对超过10k的数据压缩
        minRatio: 0.8,
      }))
    }

  },
}

其次在服务端开启gzip

server{
        gzip on;
        gzip_static on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 9;
        gzip_types text/plain application/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]\.";
}

然后在浏览器中打开控制台访问，可以看到加载资源大小和压缩后的gz大小一致，说明配置成功，附上优化后的网址www.mxreality.cn,可以看到有原本3M多的vendor.js 现在请求只有840k左右