解决Vue项目打包后生成的chunk-vendor.js文件过大,导致首次加载慢的问题

插件安装

首先安装这个插件

cnpm install --save-dev compression-webpack-plugin@5.0.1

坑: 注意一定不要直接安装这个插件, 默认安装的是现在最新的 9.0.0 版本, 打包时会报以下错误!!!

Cannot read property ‘tapPromise‘ of undefined

解决办法: 先卸载, 然后低版本即可!

# 卸载
cnpm uninstall compression-webpack-plugin
# 安装低版本
cnpm install --save-dev compression-webpack-plugin@5.0.1

修改webpack配置文件

修改 vue.config.js 配置文件，如果没有，在项目根目录手动创建一下, 可参照下面的配置文件修改

const path = require('path');

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

module.exports = {
  // 关闭Elint保存自动检测
  lintOnSave: false,

  configureWebpack: {
    // webpack性能优化
    performance: {
      // 提示类型
      hints: 'warning',
      // 入口起点的最大体积
      maxEntrypointSize: 10000000,
      // 生成文件的最大体积
      maxAssetSize: 30000000,
      // 只给出 js 文件的性能提示
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js')
      }
    },

    resolve: {
      // 目录别名
      alias: {
        '@': path.resolve(__dirname, './src'),
      }
    },

    // 插件
    plugins: [
      // webpack压缩插件
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
  }
}

现在可以打包测试一下, 插件是否配置成功

npm run build

如果 /dist/js 文件夹中出现了 .gz 的压缩包, 就代表插件安装配置成功了, 就可以上传到服务器中了

修改Nginx配置文件

如果你的前端文件是放在 Nginx 里面的话

找到自己服务器中 Nginx 的配置文件.

vim /etc/nginx/nginx.conf

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