打包公共代碼

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

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

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

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

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

剔除無用代碼

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

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

長緩存優(yōu)化

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

2、使用Name而不是id

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

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

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

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