webpack3构建全面提速优化vue-cli

伴随着vue的全球化，各种vue的组件框架越来越完善，从早期的element-ui到vux，iview等越来越多高质量的项目，使用vue进行前端构建已然是一件工程化，模块化，敏捷化的事情

在这其中，相信很多人都会选择官方的vue-cli初始化工程模板，然后通过引入第三方组件框架和工具的方式进行开发构建，我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的，在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章，但是很多不是版本太老就是不严谨

本文希望能在耗时优化与构建性能提升之间做一个平衡，即花最少的时间，对官方模板做最少的修改下，赚取最大的构建性能提升

思路

早期版本的vue-cli和webpack2时代，网上流传以下优化配置，但其实新版本的vue-cli和webpack3已经不需要

使用ParallelUglifyPlugin替换UglifyPlugin（新版本的UglifyPlugin已经支持且默认开启了多线程并行构建，所以此步骤没有必要）
启用webpack3的Scope Hoisting（vue-cli新版本已经配置webapck3，且已经默认开启此配置）
善用alias（新版本vue-cli已经进行此项工作）
配置CommonsChunkPlugin提取公用代码（新版本vue-cli已经进行此项工作）

对于新版本的vue-cli和webpack3，以下简单配置优化后可提升最少2倍的构建速度

按需引用
启用happypack多核构建项目
修改source-map配置
启用DllPlugin和DllReferencePlugin预编译库文件

实践

1、按需引用

babel-plugin-import可以实现按需加载组件，减少文件体积，只需要修改`.babelrc`文件

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

1.2然后这样按需引入组件，就可以减小体积了

import { Button } from 'iview'
Vue.component('Table', Table)

2、启用happypack多核构建项目

安装happypack后，修改/build/webpack.base.conf.js文件即可

npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool,
    })
  ]
// 修改引入loader
{
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
    include: [resolve('src'), resolve('test')]
}

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
      }
    })
  ]
}

View Code

思路

实践