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

打包公共代碼

使用CommonsChunkPlugin插件，將公共模塊拆出來(lái)，最終合成的文件能夠在最開(kāi)始的時(shí)候加載一次，便存到緩存中供后續使用。這會(huì )帶來(lái)速度上的提升，因為瀏覽器會(huì )迅速將公共的代碼從緩存中取出來(lái)，而不是每次訪(fǎng)問(wèn)一個(gè)新頁(yè)面時(shí)，再去加載一個(gè)更大的文件

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

通過(guò)設置 optimization.splitChunks.chunks: "all" 來(lái)啟動(dòng)默認的代碼分割配置項

動(dòng)態(tài)導入和按需加載

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

剔除無(wú)用代碼

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

JS的tree shaking主要通過(guò)uglifyjs插件來(lái)完成，CSS的tree shaking主要通過(guò)purify CSS來(lái)實(shí)現的

長(cháng)緩存優(yōu)化

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

2、使用Name而不是id

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

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