由於最近開發的個人博客(Vue + node)在使用過程中,發現網絡加載有點慢,所以打算對它進行一次優化。本次優化的目標如下:
index.html
設置成no-cache
,這樣每次請求的時候都會比對一下index.html
文件有沒變化,如果沒變化就使用緩存,有變化就使用新的index.html
文件。- 其他所有文件一律使用長緩存,例如設置成緩存一年
maxAge: 1000 * 60 * 60 * 24 * 365
。 - 前端代碼使用 webpack 打包,根據文件內容生成對應的文件名,每次重新打包時只有內容發生了變化,文件名纔會發生變化。
以上三點結合,就能實現文件的精確緩存。
換句話說,在一年內,如果我的個人博客沒有進行任何更新,那同一臺電腦在這段時間內訪問網站不會發起任何請求;如果有某個文件更新了,只會請求新的文件,舊的文件依舊從緩存讀取。
小知識:
- max-age: 設置緩存存儲的最大週期,超過這個時間緩存被認爲過期(單位秒)。在這個時間前,瀏覽器讀取文件不會發出新請求,而是直接使用緩存。
- 指定 no-cache 表示客戶端可以緩存資源,每次使用緩存資源前都必須重新驗證其有效性。
webpack 打包
根據文件內容生成文件名
通過配置 output 的 filename 屬性可以實現這個需求。filename 屬性的值選項中有一個 [contenthash],它將根據文件內容創建出唯一 hash。當文件內容發生變化時,[contenthash] 也會發生變化。
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, '../dist'),
},
提取第三方庫
由於引入的第三方庫一般都比較穩定,不會經常改變。所以將它們單獨提取出來,作爲長期緩存是一個更好的選擇。
這裏需要使用 webpack4 的 splitChunk 插件 cacheGroups 選項。
optimization: {
runtimeChunk: {
name: 'manifest' // 將 webpack 的 runtime 代碼拆分爲一個單獨的 chunk。
},
splitChunks: {
cacheGroups: {
vendor: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
},
}
},
- test: 用於控制哪些模塊被這個緩存組匹配到。原封不動傳遞出去的話,它默認會選擇所有的模塊。可以傳遞的值類型:RegExp、String和Function;
- priority:表示抽取權重,數字越大表示優先級越高。因爲一個 module 可能會滿足多個 cacheGroups 的條件,那麼抽取到哪個就由權重最高的說了算;
- reuseExistingChunk:表示是否使用已有的 chunk,如果爲 true 則表示如果當前的 chunk 包含的模塊已經被抽取出去了,那麼將不會重新生成新的。
- minChunks(默認是1):在分割之前,這個代碼塊最小應該被引用的次數(譯註:保證代碼塊複用性,默認配置的策略是不需要多次引用也可以被分割)
- chunks (默認是async) :initial、async和all
- name(打包的chunks的名字):字符串或者函數(函數可以根據條件自定義名字)
除了提取第三方庫外,結合 Vue 使用 import 動態引入組件還能實現按需加載。
express 設置
app.use((req, res, next) => { // 將 index.html 設爲 no-cache
if(req.url == '/') {
res.setHeader('Cache-control', 'no-cache')
}
next()
})
app.use(express.static('dist', {
etag: false,
maxAge: 1000 * 60 * 60 * 24 * 365, // 緩存一年
})) // 將dist設爲根目錄
詳細的代碼可以看一下我的個人博客項目。