详解vue-cli之webpack3构建全面提速优化(2)

日期：2020-05-11 栏目：程序人生浏览：次

3、修改source-map配置

3.1首先修改 /config/index.js 文件

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

3.2然后修改 /src/main.js 文件，关闭生产环境的调试信息

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4、启用DllPlugin和DllReferencePlugin预编译库文件

这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独编译打包一次，以后的构建都不需要再编译打包第三方库

4.1 增加 build/webpack.dll.config.js 文件，并在其中配置需要单独DLL化的模块

const path = require("path")
const webpack = require("webpack")

module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: __dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

4.2 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./vendor-manifest.json')
})

4.3 在 /package.json 增加命令

"dll": "webpack --config ./build/webpack.dll.config.js"

4.4 在 /index.html 增加DLL化JS引入（必须首先引入）

<script src="/static/js/vendor.dll.js"></script>

4.5 执行构建

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

后记

以上四个大步骤完成后，我们就完成了对vue-cli模板工程构建优化提升，虽然看起来依然算不上简单，但是这已经是最最最简单的优化了，还有更多奇技淫巧没有展开，因为我觉得过多的优化配置意义不大，反而会给项目工程带来太多冗余和复杂化

以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右，热部署更是毫秒级的

最重要的是，最简单化的配置，在未来vue-cli和webpack升级新版本后，也可以很容易的重新配置进去使用，熟练配置一次后，重新再还原配置只需要 5分钟左右想想花5分钟修改一下配置，就能换来每次构建2倍以上速度的提升，是不是会有点小激动呢：）

详解vue-cli之webpack3构建全面提速优化(2)

相关推荐