最近的項目度過了開始忙碌的基建期，也慢慢輕松下來，準備記錄一下自己最近webpack優化的措施，希望有溫故知新的效果。

項目采用的是vue全家桶，構建配置都是基于vue-cli去改進的。關于原始webpack配置大家可以看下這篇文章vue-cli#2.0 webpack配置分析,文章基本對于文件每行代碼都做了詳細的解釋，有助于更好的理解webpack。

仔細總結了一下，自己的優化基本還是網上流傳的那幾點

通過 externals 配置來提取常用庫，引用cdn 合理配置CommonsChunkPlugin 善用alias dllplugin啟用預編譯 happypack多核構建項目

externals

文檔地址 https://doc.webpack-china.org/configuration/externals/

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

CommonsChunkPlugin

文檔地址https://doc.webpack-china.org/plugins/commons-chunk-plugin/

CommonsChunkPlugin 插件，是一個可選的用于建立一個獨立文件(又稱作 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存起來到緩存中供后續使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。

resolve.alias

文檔地址 https://doc.webpack-china.org/configuration/resolve/#resolve-alias

創建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位于 src/ 文件夾下的常用模塊：

不過經過自己的實踐最后三點是對自己項目優化最大的。文章也主要對后面幾點詳細說明一下

原來打包一個項目所需要的時間基本在40秒左右，那再經過后面三步優化大概要多久呢

1.使用dllplugin預編譯與引用

首先為什么要引用Dll？在網上瀏覽了一些文章后，我發現上除了加快構建速度以外，使用webpack的dll還有一個好處。

Dll打包以后是獨立存在的，只要其包含的庫沒有增減、升級，hash也不會變化，因此線上的dll代碼不需要隨著版本發布頻繁更新。 因為使用Dll打包的基本上都是獨立庫文件，這類文件有一個特性就是變化不大。當我們正常打包這些庫文件到一個app.js里的時候，由于其他業務文件的改變，影響了緩存對構建的優化，導致每次都要重新去npm包里尋找相關文件。而使用了DLL之后，只要包含的庫沒有升級， 增減，就不需要重新打包。這樣也提高了構建速度。

那么如何使用Dll去優化項目呢

首先要建立一個dll的配置文件,引入項目所需要的第三方庫。這類庫的特點是不需要隨著版本發布頻繁更新，長期穩定。