Vue的chunk-vendors.js文件过大问题解决

一 没处理前情况

chunk-vendors.js文件达到 7.7M ，导致加载很慢，大概要八九秒，完全不能忍。

二 优化方式

• 引入compression-webpack-plugin插件，然后通过nginx的配置，让浏览器直接解析.gz文件，提升加载速度。

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

• 修改 vue.config.js，相应位置加入以下代码。

  const CompressionPlugin = require("compression-webpack-plugin")
  module.exports = {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(new CompressionPlugin({
        test: /\.(js|css|less)$/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        deleteOriginalAssets: false // 不删除源文件
      }))
    }
  }

• 在Nginx的配置中添加以下配置

  # compression-webpack-plugin 配置
  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 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
  gzip_disable "MSIE [1-6]\.";

通过以上处理，在网页访问时，chunk-vendors.js 显示为2.3M，加载还是需要2秒左右，还是不太能接受。

于是需要进一步查询项目还有哪些无用的大文件依赖，于是通过以下方法来定位大依赖：
通过 webpack-bundle-analyzer 插件来分析依赖，该插件可以很清晰的看清楚 chunk-vendors.js 中包含了哪些依赖和哪些依赖是很大的，然后进一步分析这些依赖是否真的必要，如果没有必要就直接拿掉，最终，拿掉了三个1M多的依赖，直接让 chunk-vendors.js 从7.7M下降到了3.1M，gz压缩后只有900多kb，加载大概在700毫秒左右。

具体操作如下：
1 引入 webpack-bundle-analyzer 插件

npm install --save-dev webpack-bundle-analyzer

2 修改 vue.config.js，相应位置加入以下代码。

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  configureWebpack: config => {
    return {
      plugins: [
        new BundleAnalyzerPlugin()
      ]
    }
  }
}