优化 vue项目线上每次发布及强刷后 初次加载 时间过长问题

原因：

加载慢的主要原因在于，构建后的chunk-vendors.js 文件过大，导致 初始化时间过长

优化前

有4.8MB

优化后

1.3MB 体积缩小了将近4倍 效果可想而知

好了 开始讲如何优化

第一步：

引入 webpack 、compression-webpack-plugin

ps: 一定要注意版本问题 webpack 和 compression-webpack-plugin 版本 过高和不兼容都会导致构建失败。

笔者这里使用的是下列版本

npm install --save-dev [email protected]

npm install --save-dev [email protected]

第二步：

1.配置vue.config.js

// 声明引入
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin')    //引入插件
const productionGzipExtensions = ['js', 'css']      //压缩js 和css文件

// 在 module.exports = { 中配置

module.exports = {
configureWebpack: {
  // webpack plugins
  plugins: [
    // Ignore all locale files of moment.js
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    // GitRevision.version()
    // 配置压缩
    new CompressionWebpackPlugin({
      algorithm: 'gzip',
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8
    }),
    //maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为entry/main chunk 也会包含在计数之中。
    //minChunkSize: 设置 chunk 的最小大小。
    //在合并 chunk 时，webpack 会尝试识别出具有重复模块的 chunk，并优先进行合并。任何模块都不会被合并到 entry   chunk 中，以免影响初始页面加载时间。
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5,
      minChunkSize: 100
    })
  ],
},
}

2.npm run build 构建 （如出现报错请根据情况 自行解决）
控制台出现此类信息 代表压缩成功

第三步配置 nginx

在监听80的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]\.";

结束 至此大功告成~