由于最近開發的個人博客(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設為根目錄

詳細的代碼可以看一下我的個人博客項目。

參考資料

webpack 緩存

一步一步的了解webpack4的splitChunk插件

關于找一找教程網

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網站開發技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。

[webpack + express 實現文件精確緩存]http://www.zyiz.net/tech/detail-139185.html

總結

以上是生活随笔為你收集整理的express给html设置缓存,webpack + express 实现文件精确缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。