由於最近開發的個人部落格（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外掛

到此這篇關於webpack+express實現檔案精確快取的示例程式碼的文章就介紹到這了,更多相關webpack+express檔案精確快取內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！