如何優(yōu)化前端性能（七）：webpack優(yōu)化

打包公共代碼

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

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

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

動態(tài)導(dǎo)入和按需加載

webpack提供了兩種技術(shù)通過模塊的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼，優(yōu)先選擇的方式是，使用符合 ECMAScript 提案 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure

剔除無用代碼

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

JS的tree shaking主要通過uglifyjs插件來完成，CSS的tree shaking主要通過purify CSS來實現(xiàn)的

長緩存優(yōu)化

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

2、使用Name而不是id

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

下面來使用兩個插件解決這個問題。第1個插件是 NamedModulesPlugin，將使用模塊的路徑，而不是數(shù)字標(biāo)識符。雖然此插件有助于在開發(fā)過程中輸出結(jié)果的可讀性，然而執(zhí)行時間會長一些。第二個選擇是使用 HashedModuleIdsPlugin，推薦用于生產(chǎn)環(huán)境構(gòu)建

公用代碼內(nèi)聯(lián)

使用html-webpack-inline-chunk-plugin插件將mainfest.js內(nèi)聯(lián)到html文件中