這篇文章主要為大家展示了webpack+express如何實現(xiàn)文件精確緩存，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、新源網(wǎng)站維護、網(wǎng)站推廣。

由于最近開發(fā)的個人博客（Vue + node）在使用過程中，發(fā)現(xiàn)網(wǎng)絡加載有點慢，所以打算對它進行一次優(yōu)化。本次優(yōu)化的目標如下：

• index.html 設置成 no-cache，這樣每次請求的時候都會比對一下 index.html 文件有沒變化，如果沒變化就使用緩存，有變化就使用新的 index.html 文件。
• 其他所有文件一律使用長緩存，例如設置成緩存一年 maxAge: 1000 * 60 * 60 * 24 * 365。
• 前端代碼使用 webpack 打包，根據(jù)文件內容生成對應的文件名，每次重新打包時只有內容發(fā)生了變化，文件名才會發(fā)生變化。

以上三點結合，就能實現(xiàn)文件的精確緩存。

換句話說，在一年內，如果我的個人博客沒有進行任何更新，那同一臺電腦在這段時間內訪問網(wǎng)站不會發(fā)起任何請求；如果有某個文件更新了，只會請求新的文件，舊的文件依舊從緩存讀取。

小知識：

• max-age: 設置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。在這個時間前，瀏覽器讀取文件不會發(fā)出新請求，而是直接使用緩存。
• 指定 no-cache 表示客戶端可以緩存資源，每次使用緩存資源前都必須重新驗證其有效性。

webpack 打包

根據(jù)文件內容生成文件名

通過配置 output 的 filename 屬性可以實現(xiàn)這個需求。filename 屬性的值選項中有一個 [contenthash]，它將根據(jù)文件內容創(chuàng)建出唯一 hash。當文件內容發(fā)生變化時，[contenthash] 也會發(fā)生變化。

output: {
 filename: '[name].[contenthash].js',
 chunkFilename: '[name].[contenthash].js',
 path: path.resolve(__dirname, '../dist'),
},

提取第三方庫

由于引入的第三方庫一般都比較穩(wěn)定，不會經(jīng)常改變。所以將它們單獨提取出來，作為長期緩存是一個更好的選擇。
這里需要使用 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: 用于控制哪些模塊被這個緩存組匹配到。原封不動傳遞出去的話，它默認會選擇所有的模塊?？梢詡鬟f的值類型：RegExp、String和Function;
• priority：表示抽取權重，數(shù)字越大表示優(yōu)先級越高。因為一個 module 可能會滿足多個 cacheGroups 的條件，那么抽取到哪個就由權重最高的說了算；
• reuseExistingChunk：表示是否使用已有的 chunk，如果為 true 則表示如果當前的 chunk 包含的模塊已經(jīng)被抽取出去了，那么將不會重新生成新的。
• minChunks（默認是1）：在分割之前，這個代碼塊最小應該被引用的次數(shù)（譯注：保證代碼塊復用性，默認配置的策略是不需要多次引用也可以被分割）
• chunks (默認是async) ：initial、async和all
• name(打包的chunks的名字)：字符串或者函數(shù)(函數(shù)可以根據(jù)條件自定義名字)

除了提取第三方庫外，結合 Vue 使用 import 動態(tài)引入組件還能實現(xiàn)按需加載。

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+express如何實現(xiàn)文件精確緩存的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。

分享標題：webpack+express如何實現(xiàn)文件精確緩存
轉載來于：http://www.rwnh.cn/article46/ipcchg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、營銷型網(wǎng)站建設、網(wǎng)頁設計公司、網(wǎng)站導航、企業(yè)建站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)