iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

Webpack with ASP.NET MVC系列 第 8

頁面緩存設定

output filename 配置參數

  • [name] 文件檔名
  • [path] 文件路徑
  • [ext] 文件副檔名
  • [hash] 是 Webpack 編譯對象 compilation 的 hash 值,Webpack 每一次建構無論內容是否異動,都會產生新的 hash 字串帶入文件名稱,因此沒有緩存的效用。
  • [chunkhash] 是 chunk 的 hash 值,會根據 Webpack 建構後的內容去產生 hash 字串帶入文件名稱,因此若 chunk 內容無異動, hash 就不會改變,因此可以用來達到瀏覽器緩存的效果。
  • [contenthash] 根據被提取 ( Extract ) 的內容所產生的 hash

實測緩存效果

我們使用兩個 JS 檔案、兩個 CSS 檔來做實測,Home/Index.js Product/Index.js Sass/Index.scss Sass/Product.scss 這四個檔案,我們會異動 Home/Index.js Sass/Index.scss 這兩個檔案並記錄不同 hash 的檔名變化。

Home/Index.js 內容如下
import '@Resource/Sass/Index'
export default { content: 'Index' }
Sass/Index.scss 內容如下
.page-index{ background-color: #eee; }

使用 hash

webpack.common.js
output: {
  filename: '[name].[hash:8].js',
}

CSS 的部分透過 mini-css-extract-plugin 提取出來存成獨立 CSS 檔。

new MiniCssExtractPlugin({
  filename: '[name].[hash:8].css'
})

執行打包

enter image description here

四個檔案的 hash 一模一樣。

Home/Index.js 異動如下
import '@Resource/Sass/Index'
export default { content: 'change' }

執行打包

每個檔案的 hash 值都改變了,hash 果然無法達到緩存效果。


使用 chunkhash

webpack.common.js
output: {
  filename: '[name].[chunkhash:8].js',
}
webpack.common.js
new MiniCssExtractPlugin({
  filename: '[name].[chunkhash:8].css'
})

執行打包

Home 跟 Product 的 hash 不一樣了,chunkhash 果然是依照 chunk 內容所產生的 hash。
接著再次修改 Home/Index.js 並執行打包。

可以發現 Home 的 JS 跟 CSS hash 都改變了,接著我們異動 Sass/Index.scss 內容並執行打包。

可以發現不管是修改 JS 還是 CSS,兩個檔案的 hash 同時都會被異動。因為 Webpack 產生 chunkhash 時,是以整個入口文件 ( 包含 Sass/Index.scss ) 的內容去產生的,因此無論是只有 JS 被異動或是只有 CSS 被異動,chunkhash 都會改變。但這跟我們預期有落差,既然我們已經將樣式提取出來另存 CSS,那麼兩個檔案就應該能夠分別緩存才對。


使用 contenthash

webpack.common.js
output: {
  filename: '[name].[contenthash:8].js',
}
webpack.common.js
new MiniCssExtractPlugin({
  filename: '[name].[contenthash:8].css'
})

執行打包

可以發現 CSS 與 JS 的 hash 被獨立開來了,接著再次修改 Home/Index.js 並執行打包。

成功了!只有 JS 的 hash 被改變,接著還原 Home/Index.js 內容,並修改 Sass/Index.scss 執行打包。

只有 CSS 的 hash 被改變。


結論

內容有異動的檔案 hash 會被改變,而沒有異動的檔案 hash 則維持不變,這就是我們所要的緩存效果。
須注意樣式的部分有使用 mini-css-extract-plugin 提取出來獨立存 CSS 檔,就必須使用 contenthash
若沒有將樣式提取出來另存,則使用 chunkhash 即可。


上一篇
Babel 設定
下一篇
ASP.NET MVC 導入 SASS
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言