當前位置:編程學習大全網 - 源碼下載 - xutils源代碼解讀

xutils源代碼解讀

年前開始負責壹個新項目的開發,是壹個嵌入企業微信的h5。技術棧是vite2.x+vue3.x,隨著業務的發展,版本叠代,頁面越來越多,第三方依賴越來越多,打印的包也越來越多。要解決這個問題,很容易把轉包當成壹種解決方案。根據官方的vite文檔,除了廠商分包,路由引用的組件也是異步加載的,也會產生獨立分包。這種配置在某些階段是沒有問題的。

看了源代碼和官方文檔,分析了vite和rollup的分包策略,最後得出這個解決方案:

我們來看看當時是如何分析的,壹步步揭開默認分包策略的神秘面紗。

測試後,在vite配置文件中,手工分包策略匹配build後,不會自動生成供應商包。匯總選項。輸出。手動組塊。如果想更清楚的知道vite什麽時候分廠商包,什麽時候不分廠商包,需要打開源碼看清楚。

總結:用戶配置手工委外時,會忽略vite提供的供應商委外邏輯。

那麽如果要在手工分包的基礎上進行供應商分包,就需要復制供應商分包的邏輯。

備註:

為什麽會出現組塊碎片?參考webpack分包的理解,除了入口點(靜態入口點,動態入口點)單獨生成壹個chunk外,當壹個模塊被兩個或兩個以上的chunk引用時,這個模塊需要單獨生成壹個chunk。

讓我們從源代碼的角度來看看rollup是如何生成這些區塊碎片的。

讓我們看看getChunkAssignments做了些什麽。

總結:

讓我們看看默認的分包是如何通過createChunks完成的。

對於組塊簽名的生成,舉個具體的例子,allEntryPoints包括壹個靜態入口點index.html和兩個動態入口點:Hello.vue和World.vue,有壹個模塊sdkUtils.js的入口點是Hello.vue(也就是Hello.vue導入的);有壹個模塊api.js的入口點是Hello.vue和world.vue有壹個模塊log.js依賴於Hello.vue,World.vue和index.html。

因此,在這個例子中,將生成六個組塊,api.js對應的組塊和log.js對應的組塊是額外的組塊。

總結:

  • 上一篇:逐夢精品源代碼
  • 下一篇:如何獲取https自簽名證書?網站部署https自簽名證書
  • copyright 2024編程學習大全網