最近升級了基於vue2.0+webpack1.0開發的基礎cms框架，vue升級為最新2.5版本，webpack升級為3.8版本。升級過程中順便做了下專案的構建優化，具體圍繞以下幾點來實踐：
vue-loader配置webpack外部擴充套件(Externals) 配置webpack DllPlugin和DllReferencePlugin配置happypack多程式loader構建配置webpack-parallel-uglify-plugin生成環境多程式構建配置Webpack 3 的新功能：Scope Hoisting
專案原始碼我已放在gitHub,連結地址：https://github.com/wangweianger/vue2.5-webpack3.8-spa-base-cms
vue-loader 配置
vue-loader相較以前有了大的改變，以前的 loader:"vue" 需更改為 loader:"vue-loader",需要詳細配置options的相關引數。
vue-cli 工具生成的vue-loader 配置比較完整，但檔案比較多，我們應該按照自己的專案按需配置。
具體options引數請參考：vue-loader.vuejs.org/zh-cn/
本專案loader配置如下：
webpack 外部擴充套件(Externals) 配置
解釋：防止將某些 import 的包(package)打包到 bundle 中，而是在執行時(runtime)再去從外部獲取這些擴充套件依賴(external dependencies)。
因此很多框架和庫我們可以放在CDN，編譯時不需要打包到生產檔案中。
參考連結：doc.webpack-china.org/configurati…
以官方的JQUERY為例子：
1.jquery在html內映入
2.webpack.base.config.js 新增如下配置
至此可以在專案的任何地方 import $ from 'jquery' 使用
webpack DllPlugin和DllReferencePlugin配置
參考連結：doc.webpack-china.org/plugins/dll…
DLLPlugin 和 DLLReferencePlugin 用某種方法實現了拆分 bundles，同時還大大提升了構建的速度。
解析：我們常用的框架或者包是不會頻繁更新的，甚至是引入第一次之後就不會再做更改，針對於這種情況，為什麼不把它單獨的拆分為一個或多個bundles呢。
DllPlugin 的核心就在這裡，拆分不需要經常更改的包，而不必每次都從新編譯。
具體體現到本專案如下：
1.新增 webpack.dll.config.js 檔案，此配置是單獨的webpack配置。 程式碼請參考demo專案。
2.webpack.product.config.js plugins配置 webpack.DllReferencePlugin 外掛
3.index.html 新增vendor.dll.js 檔案
備註：此處我些了一個webpack-dll-loader 的loader不需要手動增加script指令碼，具體的配置請參考專案demo。
注意事項：webpack.DllPlugin 和 webpack.DllReferencePlugin 的context 配置需要保持一致。
happypack
參考連結：www.npmjs.com/package/hap…
HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.
HappyPack使webpack構建更快，允許你並行轉換多個檔案。
專案對.vue.、js、.sass 檔案進行了happyPack配置如下：
webpack-parallel-uglify-plugin配置
參考連結：www.npmjs.com/package/web…
webpack提供的UglifyJS外掛是單執行緒編譯的，這個外掛為每個可用的cpus的執行緒並行執行的uglify，因此可以加快webpack的生產構建過程。
webpack.product.config.js新增如下配置：
注意點：如果你的專案編譯之後還有es6的語法請使用 uglifyES 去配置，如果沒有es6的語法請使用uglifyJS配置。
uglifyES的引數請參考：www.npmjs.com/package/ugl…
uglifyJS的引數請參考：www.npmjs.com/package/ugl…
Webpack 3 的新功能：Scope Hoisting
此配置簡單就是在webpack.product.config.js 配置webpack.optimize.ModuleConcatenationPlugin 外掛
備註：此外掛只對ES2015語法有效，因此使用babel編譯之後的程式碼沒有多大的提升。
babel-preset-env補充
參考連結：www.npmjs.com/package/bab…
babel-preset-env 是一個新的preset，新版 babel-loader 推薦使用的環境預設外掛，它的功能很強大，通過根據您的目標瀏覽器或執行時環境自動確定您需要的Babel外掛。
最強大的使用就在 targets 配置，支援 chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.
具體的target配置請參考：www.npmjs.com/package/bro…
如果 babel-preset-env 配置編譯後的程式碼有es6的語法，打包壓縮時就不能使用webpack自帶的webpack.optimize.UglifyJsPlugin外掛，請使用webpack-parallel-uglify-plugin外掛的uglifyES配置或者uglifyjs-webpack-plugin外掛This plugin uses UglifyJS v3 (`uglify-es`) to minify your JavaScript，uglifyjs-webpack-plugin預設多執行緒：Default number of concurrent runs: os.cpus().length - 1. 可以自己配置。
上面配置了那麼多下面我們來看看具體的優化成果：
1.webpack1.1基礎專案打包用時 大概為31~33秒
2.webpack3.8.1執行時間大概為 26~27秒 （可見webpack版本的升級效能有顯著的提高）
3.配置了happypack和webpack-parallel-uglify-plugin外掛之後時間為 15~16秒 （可見構建效能有很大的提升）
4.配置DLLPlugin之後構建時間為 8~10秒左右 （可見構建效能有非常大的提升）
總結：從webpack1.0升級到webpack3.8並配置了一些優化外掛之後專案構建速度提升4倍有於。
此篇文章，有完整的專案原始碼，vue2.5+webpack3.8 搭建的整合cms框架 ，後期有新的優化也會實時更新，再此給大家一個參考作用
關注我的部落格：zane的個人部落格
原文地址：基於vue2.5和webpack3.8的配置及其優化實踐