1. 按需加載

　　在開發(fā) SPA 項(xiàng)目的時(shí)候，項(xiàng)目中都會(huì)存在很多路由頁(yè)面。如果將這些頁(yè)面全部打包進(jìn)一個(gè) JS 文件的話，雖然將多個(gè)請(qǐng)求合并了，但是同樣也加載了很多并不需要的代碼，耗費(fèi)了更長(zhǎng)的時(shí)間。那么為了首頁(yè)能更快地呈現(xiàn)給用戶，希望首頁(yè)能加載的文件體積越小越好，這時(shí)候就可以使用按需加載，將每個(gè)路由頁(yè)面單獨(dú)打包為一個(gè)文件。當(dāng)然不僅僅路由可以按需加載，對(duì)于 loadash 這種大型類庫(kù)同樣可以使用這個(gè)功能。

　　按需加載的代碼實(shí)現(xiàn)這里就不詳細(xì)展開了，因?yàn)殍b于用的框架不同，實(shí)現(xiàn)起來都是不一樣的。當(dāng)然了，雖然他們的用法可能不同，但是底層的機(jī)制都是一樣的。都是當(dāng)使用的時(shí)候再去下載對(duì)應(yīng)文件，返回一個(gè) Promise，當(dāng) Promise 成功以后去執(zhí)行回調(diào)。

　　2. Scope Hoisting

　　Scope Hoisting 會(huì)分析出模塊之間的依賴關(guān)系，盡可能的把打包出來的模塊合并到一個(gè)函數(shù)中去。

　　比如希望打包兩個(gè)文件：

　　對(duì)于這種情況，打包出來的代碼會(huì)類似這樣：

　　但是如果使用 Scope Hoisting ，代碼就會(huì)盡可能的合并到一個(gè)函數(shù)中去，也就變成了這樣的類似代碼：

　　這樣的打包方式生成的代碼明顯比之前的少多了。如果在 Webpack4 中你希望開啟這個(gè)功能，只需要啟用 optimization.concatenateModules 就可以了：

　　3. Tree Shaking

　　Tree Shaking 可以實(shí)現(xiàn)刪除項(xiàng)目中未被引用的代碼，比如：

　　對(duì)于以上情況，test 文件中的變量 b 如果沒有在項(xiàng)目中使用到的話，就不會(huì)被打包到文件中。

　　如果使用 Webpack 4 的話，開啟生產(chǎn)環(huán)境就會(huì)自動(dòng)啟動(dòng)這個(gè)優(yōu)化功能。