基於vue2.5和webpack3.8的配置及其優化實踐

最近升級了基於vue2.0+webpack1.0開發的基礎cms框架，vue升級爲最新2.5版本，webpack升級爲3.8版本。升級過程當中順便作了下項目的構建優化，具體圍繞如下幾點來實踐：

1. vue-loader 配置
2. webpack 外部擴展(Externals) 配置
3. webpack DllPlugin和DllReferencePlugin配置

4. happypack 多進程loader構建配置

5. webpack-parallel-uglify-plugin 生成環境多進程構建配置

6. 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

參考連接：juejin.im/entry/59714…

此配置簡單就是在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的配置及其優化實踐