打包公共代碼

使用CommonsChunkPlugin插件，將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供后續使用。這會帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件

webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項 optimization.splitChunks 和 optimization.runtimeChunk

通過設置 optimization.splitChunks.chunks: "all" 來啟動默認的代碼分割配置項

動態導入和按需加載

webpack提供了兩種技術通過模塊的內聯函數調用來分離代碼，優先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure

剔除無用代碼

tree shaking 是一個術語，通常用于描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴于 ES2015 模塊系統中的靜態結構特性，例如 import 和 export。這個術語和概念實際上是興起于 ES2015 模塊打包工具 rollup

JS的tree shaking主要通過uglifyjs插件來完成，CSS的tree shaking主要通過purify CSS來實現的

長緩存優化

1、將hash替換為chunkhash，這樣當chunk不變時，緩存依然有效

2、使用Name而不是id

每個 module.id 會基于默認的解析順序(resolve order)進行增量。也就是說，當解析順序發生變化，ID 也會隨之改變

下面來使用兩個插件解決這個問題。第1個插件是 NamedModulesPlugin，將使用模塊的路徑，而不是數字標識符。雖然此插件有助于在開發過程中輸出結果的可讀性，然而執行時間會長一些。第二個選擇是使用 HashedModuleIdsPlugin，推薦用于生產環境構建

公用代碼內聯

使用html-webpack-inline-chunk-plugin插件將mainfest.js內聯到html文件中