vue 開發常用工具及配置五：hash 與快取控制

• 2020 年 1 月 14 日
• 筆記

本文大約 1500 字。

目錄

• hash
• 三種 hash
• 在 vue.config.js 中配置 hash
• 源碼

hash

以前使用 JQuery 開發前端頁面的時候，頁面中引用的資源文件如js、css等，一般尾部加一個 t=[時間戳] 參數，用於防止修改不生效。現在工程化開發，使用 Webpack 編譯，打包的資源文件路徑里自動帶有一串隨機字元串，稱為 hash：

<link href=/static/css/chunk-vendors.d637be65.css rel=preload as=style>

「d637be65」即是hash。每次 build 都會生成不同的 hash，所以每次編譯部署，都不會有快取問題。

這個 hash 是如何生成的？它的生成機制是什麼？

三種 hash

Webpack 打包後的資源按大小分有三類，從小到大排列：

• module，即模組，每個引入的文件就是一個module，常言模組化，是開發中的物理最小程式碼單位
• chunk， N 個模組打包在一起形成的的一個文件（如果 chunk 有 split，則每個分開的文件都是一個獨立的 chunk）
• bundle，一次工程編譯打包的最終產物，有可能就是 chunk，也有可能包含多個chunk的綜合體

這三類資源都可以生成 hash，粒度從低到高依次為：

• hash，根據每次編譯的內容計算所得，不是針對每個具體文件的，每次編譯都會有一個 hash
• chunkhash，入口級別的 hash，如果入口文件有改動，則從該入口打包引入的所有文件的hash都會變化，主要指同一個入口的js和css文件。
• contenthash，文件級別的 hash，只有文件的內容變了hash才會變

在 vue 項目中，啟用的是哪一類 hash？

在 vue.config.js 中配置 hash

在vue.config.js配置文件中，與輸出文件名有關的主要配置有：

  outputDir: 'dist',    assetsDir: 'static',    filenameHashing:true,    pages: {      index: {        // page 的入口        entry: 'src/main.js',        // 模板來源        template: 'public/index.html',        // 在 dist/index.html 的輸出        filename: 'index.html',        // 當使用 title 選項時，        // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>        title: 'Index Page',        hash: true,        // 在這個頁面中包含的塊，默認情況下會包含        // 提取出來的通用 chunk 和 vendor chunk。        chunks: ['chunk-vendors', 'chunk-common', 'index']      }    },

這裡的 pages.*.chunks 有什麼含義？

這部分配置，其實會編譯到webpack中的html-webpack-plugin的配置里。所以vue.config.js中的pages.chunks也就等同於html-webpack-plugin中的chunks。

再看一下 html-webpack-plugin 的 chunks，有什麼含義。

chunks 選項的作用主要是針對多入口(entry)文件。當你有多個入口文件的時候，對應就會生成多個編譯後的 js 文件。那麼 chunks 選項就可以決定是否都使用這些生成的 js 文件。例如這個html-webpack-plugin配置：

entry: {      index: path.resolve(__dirname, './src/index.js'),      index1: path.resolve(__dirname, './src/index1.js'),      index2: path.resolve(__dirname, './src/index2.js')  }  ...  plugins: [      new HtmlWebpackPlugin({          ...          chunks: ['index','index2']      })  ]

注意，而如果沒有顯式指定 chunks 選項，默認會全部引用。

通過編譯發現，如果不修改圖片或源碼，生成的 hash 是不會變化的。如果修改了 vue 組件，部分文件的 hash，例如 css、js文件的，會變化，但不想乾的圖片不會變化。

所以，回到前面的問題，在 vue 項目中，啟用的是哪一類 hash？答案當是 contenthash。

源碼

https://git.code.tencent.com/shiqiaomarong/vue-go-rapiddev-example/tags/v20200101

參考鏈接

https://segmentfault.com/q/1010000016925412/a-1020000016946034

關於Vue-cli3.0 的配置pages.chunks的參數的意義

https://segmentfault.com/a/1190000007294861#articleHeader9

html-webpack-plugin用法全解

[專欄]基於 vue+go 如何快速進行業務迭代？