成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Webpack長效緩存實踐

weapon / 3184人閱讀

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

前言

如何使Webpack生成穩(wěn)定的Chunkid問題解決了，特來反哺社區(qū)

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

問題描述

有人對Webpack比較了解的嗎?

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

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

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

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

添加新模塊前后對比截圖

如何生成穩(wěn)定ModuleId 表現(xiàn):

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

原因有兩個:

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

entry 內(nèi)容修改后，由于 webpack 的依賴收集規(guī)則導致構(gòu)建產(chǎn)生的 entry chunk 對應的 ID 發(fā)生變化，webpack runtime 也因此被改變。

解決辦法:

使用CommonsChunkPlugin 繼續(xù)將webpack runtime抽離出來

使用HashedModuleIdsPlugin代替原有的ModuleId根據(jù)依賴的收集順序遞增的正整數(shù)生成規(guī)則。

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

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

效果如下:

如何生成穩(wěn)定的ChunkId

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

后來經(jīng)過 @dahoshaw的提醒

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


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

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

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

解決辦法:

在生產(chǎn)環(huán)境中的Webpack配置添加plugin: NamedChunksPlugin

// 使用模塊名稱作為chunkid,替換掉原本的使用遞增id來作為chunkid導致的[新增entry模塊,其他模塊的hash發(fā)生抖動,導致客戶端長效緩存失效]
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("_");
}));

最后驗證一下，我們先打包一下項目，打包結(jié)果結(jié)構(gòu)如下:

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

假設(shè)我們打算新增sub-sub-home模塊。新增這個模塊后打包結(jié)果結(jié)構(gòu)如下:

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實現(xiàn)長效緩存實踐完美收官。

參考

項目演示地址

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

用 webpack 實現(xiàn)持久化緩存

Predictable long term caching with Webpack

官方文檔 - 緩存

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89026.html

相關(guān)文章

  • webpack 4.x學習使用總結(jié)

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

    ls0609 評論0 收藏0

  • Webpack 4.0 CommonsChunkPlugin 和 optimization spli

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

    Caizhenhao 評論0 收藏0

  • 基于Mobx的多頁面小程序的全局共享狀態(tài)管理實踐

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

    SexySix 評論0 收藏0

  • Webpack 最佳實踐總結(jié)(二)

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

    Stardustsky 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<