1. 按需加載
在開發(fā) SPA 項目的時候，項目中都會存在很多路由頁面。如果將這些頁面全部打包進一個 JS 文件的話，雖然將多個請求合并了，但是同樣也加載了很多并不需要的代碼，耗費了更長的時間。那么為了首頁能更快地呈現(xiàn)給用戶，希望首頁能加載的文件體積越小越好，這時候就可以使用按需加載，將每個路由頁面單獨打包為一個文件。當然不僅僅路由可以按需加載，對于 loadash 這種大型類庫同樣可以使用這個功能。
按需加載的代碼實現(xiàn)這里就不詳細展開了，因為鑒于用的框架不同，實現(xiàn)起來都是不一樣的。當然了，雖然他們的用法可能不同，但是底層的機制都是一樣的。都是當使用的時候再去下載對應(yīng)文件，返回一個 Promise，當 Promise 成功以后去執(zhí)行回調(diào)。
2. Scope Hoisting
Scope Hoisting 會分析出模塊之間的依賴關(guān)系，盡可能的把打包出來的模塊合并到一個函數(shù)中去。
比如希望打包兩個文件：
對于這種情況，打包出來的代碼會類似這樣：
但是如果使用 Scope Hoisting ，代碼就會盡可能的合并到一個函數(shù)中去，也就變成了這樣的類似代碼：
這樣的打包方式生成的代碼明顯比之前的少多了。如果在 Webpack4 中你希望開啟這個功能，只需要啟用 optimization.concatenateModules 就可以了：
3. Tree Shaking
Tree Shaking 可以實現(xiàn)刪除項目中未被引用的代碼，比如：
對于以上情況，test 文件中的變量 b 如果沒有在項目中使用到的話，就不會被打包到文件中。
如果使用 Webpack 4 的話，開啟生產(chǎn)環(huán)境就會自動啟動這個優(yōu)化功能。
京公網(wǎng)安備 11010802030320號