Vue2，vue-cli的优化记录

前言

线上项目，请求文件过大，请求文件过多，导致白屏时间过久

优化

减少不必要的映射文件：productionSourceMap

减少不必要的打包文件，只有production环境会，因为本身dev就没有压缩，production打包后的代码是经过压缩的，如果要调试找到映射文件就需要一个.js.map的文件，但是这个文件会比较大，而一般production也不需要调试，所以可以不打包这个文件。

module.exports = {
    productionSourceMap: process.env.NODE_ENV !== 'production',
}

合并小文件

我的理解是，minChunkSize是将小文件合并成一个至少200KB的文件

module.exports = {
    configureWebpack: {
    plugins: [
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 200000 // Minimum number of characters
      }),
    ]
  }
}

优化项目里的 moment.js

将moment额外的国际化语言过滤掉，大概能减少400KB左右的大小

module.exports = {
    configureWebpack: {
    plugins: [
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
    ]
  }
}

结尾

原本是写了gzip压缩的，但不知道为什么在AWS上开启了gzip压缩后，打包出来的.gz反而会影响低版本浏览器，导致白屏报错,反而不用gzip，aws会自行在br和gzip里进行选择压缩