本文是對(duì)《設(shè)計(jì)一個(gè)無懈可擊的瀏覽器緩存》文章的延申纫版，其中應(yīng)該有以兩個(gè)系列的文章：
- Webpack生成能夠持久緩存的分包配置（即此文）
- 使用Service Worker緩存資源支持離線訪問
現(xiàn)在大部分現(xiàn)代的前端工程里應(yīng)該都會(huì)使用Webpack去構(gòu)建項(xiàng)目哼绑。雖然Webpack十分強(qiáng)大素邪，但也十分復(fù)雜痊焊，在不同場(chǎng)景莫秆，不同技術(shù)里配置都不一樣崔拥，而且里面還包含這太多專業(yè)術(shù)語幸缕。所以在此文里群发，希望能幫助你:
- 知道那種文件分割file-spliting策略最優(yōu)于你的項(xiàng)目
- 如何進(jìn)行文件分割
根據(jù)Webpack術(shù)語表中可知，文件分割有兩種不同的類型发乔，兩個(gè)雖然聽起來差不多熟妓，但確是兩種十分不一樣的技術(shù)：
- Bundle Splitting -- 為SPA生成多個(gè)獨(dú)立的包，以便于瀏覽器更好地緩存栏尚。
- Code Splitting -- 在Vue和React中一般用為路由分割起愈，把代碼分成多個(gè)小塊，動(dòng)態(tài)加載當(dāng)前頁面需要使用的內(nèi)容。
在大型應(yīng)用中告材，靜態(tài)資源持久緩存帶來的效果提升會(huì)十分明顯坤次，想象你有一個(gè)2M的應(yīng)用，分割成10個(gè)200k的包斥赋，每次更新內(nèi)容只是其中一個(gè)包缰猴，用戶只需要請(qǐng)求200k的數(shù)據(jù)即可，而不用每次更新都請(qǐng)求2M的數(shù)據(jù)疤剑。對(duì)流量的節(jié)省提升也是巨大的滑绒。
Let's code.
Bundle Splitting
?? 在此文中Bundle Splitting都簡(jiǎn)稱為包分割。
包分割的目的其實(shí)很簡(jiǎn)單隘膘，假如你用Vue-cli生成項(xiàng)目疑故，那么構(gòu)建出來的代碼會(huì)有一個(gè)巨大的vendor包，假如用戶每次訪問都需要請(qǐng)求這個(gè)更新包弯菊，可想而知纵势，每次都需要長(zhǎng)時(shí)間的等待，和耗費(fèi)巨大的流量管钳。如果把這個(gè)包分成兩個(gè)钦铁，用戶每次訪問只需下載更新的包，另一個(gè)則從瀏覽器緩存中獲取才漆。
( 在很多前端優(yōu)化文章中經(jīng)常會(huì)提要壓縮資源牛曹，合并請(qǐng)求，這里的觀點(diǎn)其實(shí)跟舊的優(yōu)化方案有點(diǎn)相違背的醇滥，但是從HTTP1.1中已經(jīng)有了HTTP管線化黎比，又或者HTTP2中的多路復(fù)用，能夠在一次連接中發(fā)送多個(gè)請(qǐng)求鸳玩，加上現(xiàn)代瀏覽器提供的Preload\Prefetch等技術(shù)阅虫，多個(gè)HTTP的請(qǐng)求的性能損耗在緩存中提供的性能提升應(yīng)該是不值一提的 )
Let's talk with data. 下面我們會(huì)使用表格去對(duì)比優(yōu)化前后的不同及優(yōu)化后的收益，所以我們需要鎖定在一個(gè)固定的場(chǎng)景中不跟，以便測(cè)試和分析緩存的收益
- John在8周里每周都訪問我們的網(wǎng)站
- 我們每周都需要發(fā)版更新網(wǎng)站
- 我們有一個(gè)任務(wù)列表頁面需要每周迭代更新
- 在第四周我們添加了一個(gè)npm package
- 在第七周我們更新了所有npm package
基本配置
我們的項(xiàng)目是一個(gè)400KB左右的SPA书妻，有一個(gè)main.js的入口文件，我們的Webpack配置看起來應(yīng)該像以下這樣的（下面的配置只顯示主要配置）
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resovle(__dirname, 'dist'),
filename: '[name].[contenthash].js'
}
}
構(gòu)建出來的文件名應(yīng)該和index.mx4fd8c53.js差不多躬拢，那串看不懂的東西就是上方ouput里面的[contenthash]，就是根據(jù)文件內(nèi)容生產(chǎn)的哈希值见间，也就以為著每次更新內(nèi)容聊闯，哈希值就會(huì)更新，瀏覽器就要重新下載這個(gè) 400KB 的文件米诉。
那么每周的訪問情況應(yīng)該和下表一樣
分割第三方vendor包
如果使用 Vue-cli 菱蔬，創(chuàng)建的項(xiàng)目，構(gòu)建出來一般都有分為主入口問價(jià)，外加一個(gè)vendor.js的文件拴泌。
在Webpack 4分包配置做了很多簡(jiǎn)化魏身，通過一些簡(jiǎn)單的配置項(xiàng)就可做包分割，而不用每次寫一大堆function和正則去匹配包蚪腐，pretty good????
回到主題箭昵，在webpack配置中加上optimization.splitChunks.chunks = 'all'就可以將所有node_module分割成vendor.js。
有了這個(gè)vendor.js包回季，我們的John同學(xué)每次訪問時(shí)候就變成了下載兩個(gè)200kb的包家制，但是每周更新的時(shí)候只需下載200k內(nèi)容即可。
只有2.24M泡一，節(jié)省了23%的流量颤殴，只需幾行配置，這個(gè)數(shù)值還會(huì)隨著時(shí)間增加而不斷增加鼻忠，我想這個(gè)數(shù)值對(duì)于各位看官已經(jīng)有點(diǎn)吸引了是吧涵但，畢竟更少的請(qǐng)求流量也代表著更快的訪問速度。
我們還能進(jìn)一步提升這個(gè)數(shù)值帖蔓。
Splitting out each package
上方的vendor.js其實(shí)是一個(gè)split all in one的狀態(tài)矮瘟，所以它也會(huì)遇到剛開始的問題，只要更新某個(gè)模塊讨阻，就要全量更新芥永。知道了問題，我們可以做的更好的钝吮，不是嗎埋涧。
在這時(shí)，相信很多看官都能想到奇瘦，把所有第三方依賴都分割開單獨(dú)緩存. Right, 那么我們將把vue, vue-router, moment等分割開來:
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resovle(__dirname, 'dist'),
filename: '[name].[contenthash].js'
},
plugins: [ new webpack.HashedModuleIdsPlugin() ],
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequest: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
return `pkg.${packageName.replace('@', '')}`
}
}
}
}
}
}
Webpack Guide中的緩存有很好地解釋為什么要使用上方配置棘催，除此之外還有下面一些常規(guī)模塊需要注意一下的：
- Webpack很多配置都與緩存相悖，像每個(gè)入口只能分割出3個(gè)文件耳标，最小分割文件大小限制為30k(小文件都會(huì)打包在一起)醇坝。上方配置重新配置了這兩部分內(nèi)容。
-
cacheGroups配置項(xiàng)能告訴webpack怎么做包分割次坡，基本配置就是抽出node_modules中所有第三方庫(kù)呼猪，打包成vendor.js。一般使用該配置項(xiàng)時(shí)候key包名字砸琅，在這里我們使用了一個(gè)函數(shù)宋距，匹配到node_modules包就返回對(duì)應(yīng)包名字，例如pkg.vue.m87df6g2.js症脂。 - 這樣做還有一個(gè)好處就是谚赎，每次修改依賴包不需要手動(dòng)去維護(hù)配置淫僻。
John依然要每周下載一個(gè)200kb的主包，還有在首次加載時(shí)候加載200kb的第三方依賴壶唤，但是后面就不需要重復(fù)下載這些依賴了雳灵。
對(duì)比3.3M的配置，這里足足減少了45%請(qǐng)求流量闸盔，that’s pretty cool.
我想我們還能把這個(gè)數(shù)值提高到50%以上??
繼續(xù)分割我們主應(yīng)用的代碼
我們的main.js主包還是要每周下載的悯辙，從上方還提及到我們有一個(gè)任務(wù)列表頁面需要每周更新，那么我們應(yīng)該怎么把這個(gè)頁面單獨(dú)分割出來呢蕾殴。
配置entry配置
添加TaskList入口配置笑撞，我們以上方的配置文件為例子，添加一個(gè)TaskList的配置：
/** some code */
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/index.js'),
TaskList: path.resolve(__dirname, 'src/pages/TaskList.js'),
TaskDetail: path.resolve(__dirname, 'src/pages/TaskDetail.js')
}
}
使用code splitting
在SPA中我們一般使我們的路由動(dòng)態(tài)加載钓觉，簡(jiǎn)稱路由分割茴肥，以vue-router為例，我們的路由配置應(yīng)該如下：
export default [
{
path: 'tasklist',
name: 'TaskList',
component: () => import('@/pages/TaskList')
},
{
path: 'taskdetail',
name: 'TaskDetail',
component: () => import('@/pages/TaskDetail')
}
]
Good, 現(xiàn)在webpack分離了ProductList.js和ProductDetail兩個(gè)文件荡灾，我們的John同學(xué)又能少下載50kb的文件了瓤狐。
Look like this.
現(xiàn)在只有1.44M了！
我們減少了John57%的下載文件大小批幌，隨著訪問時(shí)間的增長(zhǎng)這個(gè)值也會(huì)越來越大础锐。
為什么代碼分割這么重要，除了能單獨(dú)緩存和減少文件請(qǐng)求大小外荧缘，更小的包也以為著更快的腳本解析時(shí)間皆警，更快的首屏渲染時(shí)間。
Summary
關(guān)于文件數(shù)量這里還要再插播一下截粗，如果舊項(xiàng)目使用此配置時(shí)候信姓，應(yīng)該會(huì)生成很多零碎的文件，主要原因可能有以下幾方面：
- 項(xiàng)目積累太多無用依賴沒有及時(shí)清理
- css全部extract绸罗，全部樣式都按組件粒度提取出來了意推，這里建議只提取公共和第三方的樣式，具體可以參考mini-css-extract-plugin的配置
最后我們總結(jié)一下要點(diǎn)：
- 將文件分割成多個(gè)更小的文件
- SPA中珊蟀，減少入口文件第三方插件的數(shù)量菊值，分散到各個(gè)模塊中加載，這樣能加快應(yīng)用啟動(dòng)速度育灸，減少首屏所需資源的數(shù)量腻窒。
- 使用contentHash避免每次構(gòu)建生成新的文件id，便于瀏覽器緩存
另外磅崭，多看文檔 ??
