前言

伴隨著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、按需引用

1.1幾乎所有的第三方組件框架都會提供組件的 按需引用 方式，以iview為例，通過借助插件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.jsconst 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配置