vue打包的优化

在工作中打包vue时候我们会发现存在包过大的情况这时候怎么办呢:
1、优化source-map

在vue-cli脚手架的webpack.prod.config.js文件夹中有这么一段代码

这段代码是读取在config文件夹下index.js中有关source-map配置的

而这段代码的作用就是打包的时候会生成一个map文件,帮我们在生产环境报错的时候能够准确的定位错误,可是有时候打包的时候会过大,可以选择关闭这个功能,改为false即可

2、开启gzip压缩
在config文件夹下的index中

在使用这个功能之前我们需要下载下面这个依赖

npm install compression-webpack-plugin --save-dev
下载下来之后开启了gzip压缩

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240, //处理比这个值大的文件
      minRatio: 0.8  //处理压缩值比这个小的资源
    })
  )
}

3、提取公共文件

 entry: {
    app: './src/main.js'
  }
  
 new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async', // 异步加载的公共文件打包成vendor-async.[chunkHash].js名称
  /*
    children为true，代表source chunks为code split出来的children chunks；
    code split分离出来的模块基本是异步加载；
    意味着共同依赖的模块跟异步模块并行异步加载。
    当然如果共同依赖是同步模块加载，那么就会打包到首屏加载的app.bundle。

    children为false，代表source chunks是entry chunks（入口文件），
    意味着共同依赖的模块就会被打包到首屏加载的app.bundle。
  */
  children: true, 
  minChunks: 3  // 有至少3个chunks共同依赖的公共模块，就把该公共模块抽取出来独立打包。
})

这一点是在cli脚手架内已经优化好的