Webpack長效緩存實踐

weapon 發布于2019-08-21 17:01 / 3177人閱讀

摘要：項目已經配置了，并且生效。期望效果新增模塊后其他模塊的構建后的文件沒有變化，提高緩存命中率。新增這個模塊后打包結果結構如下至此，通過實現長效緩存實踐完美收官。

前言

如何使Webpack生成穩定的Chunkid問題解決了，特來反哺社區

先總結一下。HashedModuleIdsPlugin用于穩定 ModuleId 的，我問的問題核心是 **生成穩
定的ChunkId**，這兩者是不一樣的。

問題描述

有人對Webpack比較了解的嗎?

我這里有個問題想要請教一下：當我們新增模塊(也就是entry加了新東西)的時候,怎么保證ChunkId保持穩定

比如我在entry下新增加了三個模塊,但是帶動了許多構建后的文件Hash也跟著變動，查看構建后的代碼發現是因為ChunkId發生了遞增導致的。項目已經配置了HashedModuleIdsPlugin，并且生效。

期望效果 : entry新增模塊后,其他模塊的構建后的文件Hash沒有變化，提高緩存命中率。

下面是添加新模塊并打包的前后文件Hash對比

添加新模塊前后對比截圖

如何生成穩定ModuleId 表現:

只修改了 home/index.js 的代碼，但在最終的構建結果中，vendor.js 的文件指紋也被修改了

原因有兩個:

webpack runtime (運行時) 中包含 chunks ID 及其對應 chunkhash 的對象，但 runtime 被集成到 vendor.js 中。

entry 內容修改后，由于 webpack 的依賴收集規則導致構建產生的 entry chunk 對應的 ID 發生變化，webpack runtime 也因此被改變。

解決辦法:

使用CommonsChunkPlugin 繼續將webpack runtime抽離出來

使用HashedModuleIdsPlugin代替原有的ModuleId根據依賴的收集順序遞增的正整數生成規則。

順便一提，生成穩定的ModuleId在官方文檔 - 緩存中有提及

早前經過合理的配置(可以參考用 webpack 實現持久化緩存，實現了其他模塊變動后，vendor.js的文件指紋不會發生變化的效果)

效果如下:

如何生成穩定的ChunkId

很多文章都只介紹到如何生成穩定的ModuleId，沒有提到生成穩定的ChunkId

后來經過 @dahoshaw的提醒

可以看下Webpack的源碼，Webpack是根據模塊的順序遞增chunkid，源代碼中的applyChunkIds函數,所以官方有提供NamedChunksPlugin插件來根據文件名來穩定你的chunkid

webpackJsonp有三個參數，每次有新的entry加入說明資源數增加了，Chunk數量也會跟著增加。ChunkId也會遞增

這有點類似ModuleId遞增變動導致的文件指紋變化而導致的長效緩存失效

他推薦的文章 Predictable long term caching with Webpack確實寫的不錯!

解決辦法:

在生產環境中的Webpack配置添加plugin: NamedChunksPlugin

// 使用模塊名稱作為chunkid,替換掉原本的使用遞增id來作為chunkid導致的[新增entry模塊,其他模塊的hash發生抖動,導致客戶端長效緩存失效]
config.plugins.push(new webpack.NamedChunksPlugin((chunk) => {
  // 解決異步模塊打包的問題
  if (chunk.name) {
    return chunk.name;
  }
  return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
}));

最后驗證一下，我們先打包一下項目，打包結果結構如下:

dist
├── home
│?? ├── haha.dc494f13ed558999751e.js
│?? ├── index.2266d24e04004acaa5a6.css
│?? └── index.2b15fbd2daa6c833f5d5.js
├── manifest.json
├── runtime.1de86da7006780a96879.js
├── static
│?? └── images
│??     ├── logo-ea7f33f9bddceac362c1d7f378043187.png
│??     └── share-icon-881a5a400142ab60684b3cec860611b4.png
├── sub-home
│?? ├── haha.141284e7095f605726ac.js
│?? ├── index.7039775e1ba458814d14.js
│?? └── index.efd6d51187ec8a058fe6.css
└── vendor.dee373a1cd36f461d200.js

4 directories, 11 files

假設我們打算新增sub-sub-home模塊。新增這個模塊后打包結果結構如下:

dist
├── home
│?? ├── haha.dc494f13ed558999751e.js
│?? ├── index.2266d24e04004acaa5a6.css
│?? └── index.2b15fbd2daa6c833f5d5.js
├── manifest.json
├── runtime.1de86da7006780a96879.js
├── static
│?? └── images
│??     ├── logo-ea7f33f9bddceac362c1d7f378043187.png
│??     └── share-icon-881a5a400142ab60684b3cec860611b4.png
├── sub-home
│?? ├── haha.141284e7095f605726ac.js
│?? ├── index.7039775e1ba458814d14.js
│?? └── index.efd6d51187ec8a058fe6.css
├── sub-sub-home
│?? ├── haha.6501ce2d3a138709282b.js
│?? ├── index.c367ca84bd261f36f050.js
│?? └── index.efd6d51187ec8a058fe6.css
└── vendor.dee373a1cd36f461d200.js

5 directories, 14 files

至此，通過Webpack實現長效緩存實踐完美收官。

參考

項目演示地址

知乎 - webpack 每次打包公用vendor 每次hash都會變化，有辦法解決嗎？

用 webpack 實現持久化緩存

Predictable long term caching with Webpack

官方文檔 - 緩存

GPU云服務器云服務器長效 webpack _webpack webpack cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89026.html

webpack 4.x學習使用總結

摘要：最近一周一直都在折騰一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。常規入口指示應該使用哪個模塊，來作為構建其內部依賴圖的開始。把代碼轉換成，在使用語言中有介紹。擴展語法，使用下一代，在使用中有介紹。用于忽略部分文件。最近一周一直都在折騰webpack,一些項目中常用的記錄下來，以后免去簡單的配置再去查文檔。常規 1.入口指示 webpack 應該使用哪個模塊，來作為構建...

ls0609 2019-08-26 12:17 評論0 收藏0
Webpack 4.0 CommonsChunkPlugin 和 optimization spli

摘要：可以通過配置屬性進行修改，默認將會自動創建個庫文件僅含有依然會創建個庫文件僅含有假設所有的體積都大于將會創建一個庫文件和一個通用組件文件僅含有當這些體積小于是，會故意將該模塊復制到三個文件中。該文章內容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization 原有的問題 webpack...

Caizhenhao 2019-08-23 14:55 評論0 收藏0
基于Mobx的多頁面小程序的全局共享狀態管理實踐

摘要：所以雖然是是用在小程序上，不過我想對于的狀態管理，也有這么一丟丟啟發。在目錄下放入和這兩個庫，同時在目錄下新建用于存放全局狀態。建立由于小程序中不支持裝飾器，所以采用了的寫法。另外，小程序中不支持路徑的省略。 what 名字很長很繞靠口，總的來說，本文是對開發小程序過程中使用mobx的一個總結。狀態管理，相比大家也很熟悉，顧名思義，是對前端頁面繁復的狀態進行管理，在此，我也不過多贅...

SexySix 2019-08-20 18:20 評論0 收藏0
Webpack 最佳實踐總結(二)

摘要：默認做法是告訴瀏覽器這個文件的緩存時間，然后當文件內容被修改，則需要重命名該文件告訴瀏覽器需要重新下載和緩存，例如也能做類似的工作。上一篇介紹了 Webpack 優化項目的四種技巧，分別是通過 UglifyJS 插件實現對 JavaScript 文件的壓縮，css-loader 提供的壓縮功能，配置NODE_ENV可以進一步去掉無用代碼，tree-shaking幫助找到更多無用代碼 ...

Stardustsky 2019-08-21 12:03 評論0 收藏0