vue-cli 脚手架是如何打包优化

vue 脚手架如何打包优化

之前一篇博客讲了 vue-cli 是如何构建项目的，这次讲讲 vue-cli 打包做了什么优化。

vue-cli 项目构建博客地址

vue-cli 优化

这里有压缩代码，代码分割，还有利用缓存三个方面

（1）压缩代码

使用压缩插件压缩代码，减少文件大小，是很常用的优化方式

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false	
  },
  sourceMap: true
})

（2）代码分割

页面功能复杂导致加载体积过大时，就需要进行代码分割，一是分离业务代码和第三方库，二是按需加载

分离业务代码和第三方库：使变动较少的第三方库分离出来，利于缓存，不用经常更新

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
})

具体如上图，在打包过程中，使用 CommonsChunkPlugin 插件从代码中分离出 vendor.js 这个公共代码。这里看 r