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

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

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

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

小知識(shí)：

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

webpack 打包

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

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

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

提取第三方庫(kù)

由于引入的第三方庫(kù)一般都比較穩(wěn)定，不會(huì)經(jīng)常改變。所以將它們單獨(dú)提取出來，作為長(zhǎng)期緩存是一個(gè)更好的選擇。
這里需要使用 webpack4 的 splitChunk 插件 cacheGroups 選項(xiàng)。

optimization: {
  runtimeChunk: {
  name: 'manifest' // 將 webpack 的 runtime 代碼拆分為一個(gè)單獨(dú)的 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: 用于控制哪些模塊被這個(gè)緩存組匹配到。原封不動(dòng)傳遞出去的話，它默認(rèn)會(huì)選擇所有的模塊?？梢詡鬟f的值類型：RegExp、String和Function;
• priority：表示抽取權(quán)重，數(shù)字越大表示優(yōu)先級(jí)越高。因?yàn)橐粋€(gè) module 可能會(huì)滿足多個(gè) cacheGroups 的條件，那么抽取到哪個(gè)就由權(quán)重最高的說了算；
• reuseExistingChunk：表示是否使用已有的 chunk，如果為 true 則表示如果當(dāng)前的 chunk 包含的模塊已經(jīng)被抽取出去了，那么將不會(huì)重新生成新的。
• minChunks（默認(rèn)是1）：在分割之前，這個(gè)代碼塊最小應(yīng)該被引用的次數(shù)（譯注：保證代碼塊復(fù)用性，默認(rèn)配置的策略是不需要多次引用也可以被分割）
• chunks (默認(rèn)是async) ：initial、async和all
• name(打包的chunks的名字)：字符串或者函數(shù)(函數(shù)可以根據(jù)條件自定義名字)

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

express 設(shè)置

app.use((req, res, next) => { // 將 index.html 設(shè)為 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設(shè)為根目錄

詳細(xì)的代碼可以看一下我的個(gè)人博客項(xiàng)目。

參考資料

webpack 緩存
一步一步的了解webpack4的splitChunk插件

到此這篇關(guān)于webpack+express實(shí)現(xiàn)文件精確緩存的示例代碼的文章就介紹到這了,更多相關(guān)webpack+express文件精確緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！