---

你是否想過，當你修改代碼后，瀏覽器為什么仍然拿著舊版資源不放？秘密就在于——文件指紋！簡單來說，文件指紋就像給每個構建出來的文件貼上獨一無二的“姓名牌”，告訴瀏覽器：“嘿，我更新啦，換下舊貨吧！”

---

文件指紋到底是什么？

文件指紋（File Fingerprinting）其實就是在文件名中附加一段由文件內容生成的哈希值。舉個例子：

• 舊版：app.js
• 新版：app.3b8a1f2e.js

哈希值（如 3b8a1f2e）就像文件的身份證，只有內容真的發生變化，身份證才會“變臉”。這樣就能讓瀏覽器和CDN準確辨認出哪個版本是最新的。

---

為何我們需要文件指紋？

1. 告別緩存亂象
   瀏覽器喜歡把東西緩存起來，但一不小心就用成了“老古董”。有了指紋，文件更新了，新的“身份證”就會迫使瀏覽器重新加載最新版本。

2. CDN高效管理
   CDN節點依據URL來緩存文件，不同的指紋就代表不同的文件，確保用戶拿到的都是最新鮮的資源。

3. 版本管理更輕松
   就像手機APP版本號一樣，文件指紋有助于追蹤每次小改動，便于日后排查問題。

4. 長期緩存實現高性能加載
   只要文件內容不變，指紋也不變，這樣用戶就能一直利用緩存，提升加載速度。

---

Webpack中常見的指紋方式

Webpack提供了三種主要的哈希方式，讓你在不同場景下選擇最適合的：

1. Hash

• 特點：基于整個構建過程生成一個統一哈希

• 缺點：只要項目里任意文件變了，所有輸出文件的指紋都會發生變化，相當于全家換新裝

• 示例配置：

  output: {filename: '[name].[hash:8].js',path: __dirname + '/dist'
  }
  

2. Chunkhash

• 特點：每個入口文件（或“塊”）都有自己的哈希

• 適用場景：多個頁面、多個入口文件中，只有部分入口發生變化時，未改動入口文件的緩存可以完美保留

• 示例配置：

  output: {filename: '[name].[chunkhash:8].js',path: __dirname + '/dist'
  }
  

3. Contenthash

• 特點：只根據文件內容生成哈希，如果內容不變，哈希絕不更新

• 推薦：當前最理想的做法，特別適合用于需要長期緩存的靜態資源

• 示例配置：

  output: {filename: '[name].[contenthash:8].js',path: __dirname + '/dist'
  }
  

---

在Webpack中配置文件指紋

JavaScript文件

直接在output配置中使用指紋：

module.exports = {output: {filename: '[name].[contenthash:8].js',chunkFilename: '[name].[contenthash:8].chunk.js',path: __dirname + '/dist'}
}

CSS文件

配合mini-css-extract-plugin插件來使用指紋，注意新版Webpack中建議使用[contenthash]來確保CSS文件僅在實際改動時更新：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:8].css',chunkFilename: '[name].[contenthash:8].chunk.css'})]
}

圖片、字體等資源

對于這類靜態資源，如果你使用的是舊版本Webpack，可以借助file-loader，格式如下：

module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {name: '[name].[hash:8].[ext]'}}]}]}
}

小提示： 從Webpack 5開始，已經內置了資源模塊（Asset Modules）功能，可以省去安裝file-loader的煩惱哦！

---

最佳實踐和一些糾正

1. 只在生產環境使用指紋
   開發階段追求快速反饋，不需要每次構建都重新生成長長的文件名，畢竟調試時只關心“有木有改！”

2. 保證哈希長度適中
   通常8位哈希已足夠，既簡潔又能保證沖突率低。

3. 固定模塊ID防止無謂哈希變化
   如果發現文件內容沒變但指紋卻變了，可能是模塊ID在不斷變化。舊做法是使用HashedModuleIdsPlugin，而在Webpack 5中，更推薦使用內置的確定性算法：

   optimization: {moduleIds: 'deterministic',runtimeChunk: 'single'
   }
   

4. CSS與JS分開緩存
   為了避免CSS和JS文件因打包不同步導致的緩存混亂，確保它們分別使用contenthash。就像讓兩個好基友各自管理自己的家庭事務。

5. 合理拆分代碼
   切記，把幾乎不變的庫代碼（vendor）、偶爾更新的業務代碼和常變的運行時代碼分離開來。示例如下：

   optimization: {splitChunks: {cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'}}},runtimeChunk: 'single'
   }
   

   這樣一來，就算你修改了一點點業務邏輯，其他部分依然能“坐享其成”，高速加載不是夢！

---

總結

文件指紋就像是給你的資源穿上了“高科技外衣”，不僅能讓瀏覽器和CDN精確識別文件版本，還能避免因緩存問題帶來的各種麻煩。無論是Hash、Chunkhash還是Contenthash，各有千秋，你只需選出最適合你項目的那一款。快樂構建，從有“名牌”的資源開始！

---