前言
伴隨著vue的全球化，各種vue的組件框架越來越完善，從早期的element-ui到vux，iview等越來越多高質(zhì)量的項目，使用vue進行前端構(gòu)建已然是一件工程化，模塊化，敏捷化的事情
在這其中，相信很多人都會選擇官方的vue-cli初始化工程模板，然后通過引入第三方組件框架和工具的方式進行開發(fā)構(gòu)建，我個人也十分推崇這種做法。但是vue-cli初始化的項目模板畢竟是面向所有開發(fā)者的，在兼容性方面會有一定妥協(xié)。相信很多人都已經(jīng)搜索過各類的webpack構(gòu)建優(yōu)化文章，但是很多不是版本太老就是不嚴謹
本文希望能在耗時優(yōu)化與構(gòu)建性能提升之間做一個平衡，即花最少的時間，對官方模板做最少的修改下，賺取最大的構(gòu)建性能提升
思路
早期版本的vue-cli和webpack2時代，網(wǎng)上流傳以下優(yōu)化配置，但其實新版本的vue-cli和webpack3已經(jīng)不需要
使用ParallelUglifyPlugin替換UglifyPlugin（新版本的UglifyPlugin已經(jīng)支持且默認開啟了多線程并行構(gòu)建，所以此步驟沒有必要）
啟用webpack3的Scope Hoisting（vue-cli新版本已經(jīng)配置webapck3，且已經(jīng)默認開啟此配置）
善用alias（新版本vue-cli已經(jīng)進行此項工作）
配置CommonsChunkPlugin提取公用代碼（新版本vue-cli已經(jīng)進行此項工作）
對于新版本的vue-cli和webpack3，以下簡單配置優(yōu)化后可提升最少2倍的構(gòu)建速度
- 按需引用
- 啟用happypack多核構(gòu)建項目
- 修改source-map配置
- 啟用DllPlugin和DllReferencePlugin預(yù)編譯庫文件
實踐
1、按需引用
1.1幾乎所有的第三方組件框架都會提供組件的按需引用方式，以iview為例，通過借助插件babel-plugin-import可以實現(xiàn)按需加載組件，減少文件體積，只需要修改.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多核構(gòu)建項目
安裝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構(gòu)建loader
include: [resolve('src'), resolve('test')]
}
3、修改source-map配置
3.1首先修改/config/index.js文件
// /config/index.js
dev環(huán)境：devtool: 'eval'（最快速度）
prod環(huán)境：productionSourceMap: false（關(guān)閉source-map）
3.2然后修改/src/main.js文件，關(guān)閉生產(chǎn)環(huán)境的調(diào)試信息
// /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預(yù)編譯庫文件
這是最復雜也是提升效果最明顯的一步，原理是將第三方庫文件單獨編譯打包一次，以后的構(gòu)建都不需要再編譯打包第三方庫
4.1 增加build/webpack.dll.config.js文件，并在其中配置需要單獨DLL化的模塊
const path = require("path")
const webpack = require("webpack")
module.exports = {
// 你想要打包的模塊的數(shù)組
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 執(zhí)行構(gòu)建
npm run dll（這一步會生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build
后記
以上四個大步驟完成后，我們就完成了對vue-cli模板工程構(gòu)建優(yōu)化提升，雖然看起來依然算不上簡單，但是這已經(jīng)是最最最簡單的優(yōu)化了，還有更多奇技淫巧沒有展開，因為我覺得過多的優(yōu)化配置意義不大，反而會給項目工程帶來太多冗余和復雜化
以上的配置實際測試的構(gòu)建效果是從原先的13秒減少到了6秒左右，熱部署更是毫秒級的
最重要的是，最簡單化的配置，在未來vue-cli和webpack升級新版本后，也可以很容易的重新配置進去使用，熟練配置一次后，重新再還原配置只需要5分鐘左右想想花5分鐘修改一下配置，就能換來每次構(gòu)建2倍以上速度的提升，是不是會有點小激動呢：）
再多說些后話吧，其實webpack2至webpack3的升級，個人覺得蠻失望的，因為它還是沒有從根本上解決其配置過于復雜的問題，作為目標是占領(lǐng)全世界所有web項目構(gòu)建的產(chǎn)品，它應(yīng)該更多地從易用性/人性化的角度去考慮
每一次看著webpack的工程里面的各種.babelrc，.postcssrc.js...還有各種的.conf文件，甚至還有各種的main，index，app文件，就忍不住想吐槽，究竟為什么前端的構(gòu)建會發(fā)展成這樣，一個好好的項目工程里，十幾種配置文件，真的有必要嗎？我原本以為webpack3會將這一切變得簡單，然而它并沒有，不過既然暫時沒有辦法去改變，那我們能做的就是，盡可能理解其中原理，盡自己最大的可能去簡化/優(yōu)化
后續(xù)...
這篇文章開始動筆的時候還是2017年的年末，關(guān)于【后記】中的思考和討論，其實在2018年已經(jīng)有了比較完美的解決方案，那就是 parcel ，雖然國內(nèi)搜索關(guān)于它的資料還不多，但是從目前來看，這幾乎是前端構(gòu)建最完美和最終極的解決方案。針對webpack配置過于冗余復雜，且代碼侵入強的問題，parcel采用的是完全零配置的構(gòu)建方案。雖然我個人并非專職于前端工作，但是前端也是我很大的興趣愛好之一，對于前端最前沿的成果一定是要去嘗試的
對于parcel的嘗試，讓我深陷其中，以至于到目前為止，我已經(jīng)將我個人所有的前端項目無論大小，全部切換成parcel構(gòu)建，而徹底放棄webpack。目前我將parcel和vue結(jié)合的模板工程項目開源 Parcel-VUE Github & Parcel-VUE官網(wǎng)，希望能借此幫助到更多被webpack困擾或者是被復雜的構(gòu)建阻撓在前端學習之門外的讀者們
感謝你的閱讀，希望本文能夠給你帶來幫助：）
作者：CheneyXu
關(guān)于：XServer官網(wǎng)
