1. webpack最佳化打包構建速度-開發體驗和效率
-
最佳化babel-loader
快取：cacheDirectory,只要加了這個，es6程式碼中沒有改動的就不會重新編譯，集中快取，加快速度。
-
IgnorePlugin 避免引入無用模組
比如有個Moment.js庫支援很多語言
避免引入過多的語言，動態引入。
-
noParse 避免重複打包
比如xxx.min.js之類的檔案是已經用模組化處理過的，不用我們再去打包一次。
-
happyPack 多程序打包
JS單執行緒，開啟多程序打包
提高構建速度（特別是多核CPU）happyPack可以放到common也可以放到dev當中。
-
ParellelUglifyPlugin 多程序壓縮JS
只能放到生產環境下prod.
關於開啟多程序 - 為什麼不能直接用happyPack或者Uglify 要按需使用。
-
自動重新整理（只在開發環境用）
變數更新，儲存之後，網頁全部重新整理，狀態會丟失，速度比較慢。
用不太到。只要引用了devServer會預設開啟用自動更新。 -
熱更新
新程式碼生效，網頁不重新整理，狀態不丟失。（體驗是好，但是成本變高了）
在devServer裡面加一條hot: true
module.hot註冊監聽熱更新範圍
-
DllPlugin 動態連結庫外掛
思路：先提前打包好，我們再去使用它。
背景：
怎麼去用這兩個外掛？
單獨配置一個webpack.dll.js檔案👇
第一個外掛：產出dist目錄下的react.dll.js（內容）和react.manifest.json（索引）。
第二個人外掛：第一步引入外掛src=...dll.js，第二步exclude: /node_modules/不要再轉換已經打包過的程式碼，第三步告訴webpack索引在哪個地方，根據索引找對應位置。
先引用:
原始碼中怎麼寫還是怎麼寫。
總結：
可用於生產環境的：最佳化babel-loader(include exclude)，IgnorePlugin，noParse，happyPack，ParallelUglifyPlugin
不可用於生產環境的：自動重新整理，熱更新，DllPlugin(只適用於開發環境打包速度的最佳化)
2. 最佳化產出程式碼-產品效能
-
小圖片base64編碼
-
bundle + 雜湊
-
懶載入（非同步載入）
-
提取公共程式碼
-
IgnorePlugin(自己手動引用)
-
使用 CDN 加速
配置CDN域名字首，然後打包會生成結果。第二步把生成的JS檔案、CSS檔案等靜態資源上傳到CDN上使之可被訪問到。 -
使用production
mode: production生產環境。
好處：可以自動壓縮程式碼，如果嫌棄壓縮太慢，開啟ParallelUglifyPlugin; Vue/React等會自動刪掉除錯程式碼（如開發環境的warning）；
啟動Tree-Shaking(沒有用到的程式碼刪掉了，（比如一個函式壓根沒有呼叫）載入更快，執行更快).
ES6 module才能讓tree-shaking生效，commonjs不行。 為什麼呢？👇
Tree-Shaking 在webpack打包情況下執行，webpack打包的時候程式碼還沒有執行，只是一個靜態分析、編譯。Commonjs是動態引入，執行程式碼的時候引入導致執行到這個時候沒有引入但是不敢刪掉啊，因為誰知道待會兒會不會引入用到呢？tree-shaking沒法工作。
-
使用Scope Hosting
打包後：
原始碼有兩個檔案，對應兩個函式。一個函式會產生一個作用域，檔案一多會很複雜。
把多個檔案合併到一個函式里：👇
如何配置？---引用外掛，開啟外掛。要優先採用ES6模組化語法
總結：
