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

打包公共代碼

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

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

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

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

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

剔除無(wú)用代碼

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

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

長(zhǎng)緩存優(yōu)化

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

2、使用Name而不是id

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

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