代碼拆分可以通過減少初始捆綁尺寸來改善JavaScript應(yīng)用程序性能；它通過將代碼按需將代碼拆分為較小的塊，從而使初始負(fù)載更快，更好的緩存和改進(jìn)的用戶體驗。這三種主要類型是：1?；堵酚傻牟鸱?- 使用React.lazy和懸念的每條路線的負(fù)載代碼； 2。組件級拆分 - 延遲負(fù)載的非關(guān)鍵組件（例如模態(tài)）； 3。供應(yīng)商拆分 - 單獨的第三方庫，用於更長的緩存。最佳實踐包括使用Dynamic Import（），使用WebPack Bundle Analyzer等工具分析捆綁包，預(yù)取資源和震驚的樹木來消除未使用的代碼。但是，陷阱包括太多塊的HTTP開銷，負(fù)載狀態(tài)以及大型的第三方腳本破壞了收益。代碼分配不會降低總尺寸，而是在加載代碼時優(yōu)化，並在與懶惰的加載和正確的分析結(jié)合使用時增強(qiáng)感知性能。

當(dāng)構(gòu)建現(xiàn)代JavaScript應(yīng)用程序時，性能至關(guān)重要 - 影響負(fù)載時間的最大因素之一是捆綁尺寸。隨著應(yīng)用程序的增長，需要下載，解析和執(zhí)行的JavaScript數(shù)量也是如此。這就是代碼拆分作為關(guān)鍵優(yōu)化策略的地方。

讓我們分解什麼捆綁包大小的含義，為什麼重要以及代碼拆分如何有所幫助。

什麼是捆綁尺寸，為什麼重要？

在典型的JS應(yīng)用程序（例如使用React，Vue或Angular構(gòu)建的）中，您的代碼以及依賴項將使用WebPack ， Vite或lollup等工具捆綁到一個或多個JavaScript文件中。這是你的捆綁包。

• 大捆尺寸意味著要下載更多數(shù)據(jù)。
• 慢速網(wǎng)絡(luò)上的移動用戶受到最大的影響。
• 瀏覽器必須在應(yīng)用程序變得互動之前解析和編譯所有JS - 這延遲了交互式（TTI） 。
• 搜索引擎考慮排名中的頁面速度。

即使您的應(yīng)用程序富含功能，用戶也不應(yīng)支付不需要的加載代碼的費用。

什麼是代碼斑點，它有何幫助？

代碼分裂是將捆綁包分成可以按需或平行加載的較小塊的實踐。

而不是一個500kb main.js ，您可能有：

• main.js （100KB） - 核心應(yīng)用邏輯
• auth.js （50KB） - 登錄/註冊代碼
• dashboard.js （120kb） - 用戶儀表板
• vendor.js （200KB） - 第三方圖書館

這些塊僅在需要時加載。

關(guān)鍵好處：

• 更快的初始負(fù)載
• 更好的緩存（一個塊的變化不會使其他人無效）
• 改善了用戶體驗，尤其是在手機(jī)上

代碼拆分類型

有三種主要方法：

1。基於路線的分裂（最常見）

通過路線拆分代碼。當(dāng)用戶導(dǎo)航到/dashboard時，僅加載儀表板代碼。

 //與反應(yīng)反應(yīng)。懶惰和懸念
const dashboard = react.lazy（（）=> import（'./ dashboard'））;

功能應(yīng)用程序（）{
  返回 （
    <懸掛s後備=“加載...”>
      <儀表板 />
    </懸浮>
  ）；
}

這會與大多數(shù)捆綁機(jī)自動創(chuàng)建一個單獨的塊。

2。組件級分割

在初始渲染中不需要拆分不太關(guān)鍵的組件（例如，模態(tài)，工具提示）。

 const ImageDitor = react.lazy（（）=> import（'./ imageeditor'））;

對於不經(jīng)常出現(xiàn)的重型UI組件有用。

3。供應(yīng)商拆分

與應(yīng)用代碼分開的第三方庫（例如lodash ， moment ， axios ）。

為什麼？供應(yīng)商代碼更改較少，因此瀏覽器可以緩存更長的時間。

大多數(shù)捆綁器都會以config自動執(zhí)行此操作：

 // WebPack示例
Splitchunks：{
  塊：“全部”，
  cachegroups：{
    小販： {
      test：/[\\/] node_modules [\\/]/，
      名稱：“供應(yīng)商”，
      優(yōu)先：10，
      reuSeexistingChunk：是的，
    }
  }
}

工具和最佳實踐

• 使用Dynamic import() - 這是觸發(fā)代碼分裂的標(biāo)準(zhǔn)方法。
• 分析您的捆綁包- WebPack Bundle Analyzer之類的工具可視化所佔用空間的東西。
• 智能預(yù)加載或預(yù)摘要- 使用<link rel="prefetch">對於可能的隔壁塊。
• 保持關(guān)鍵的CSS/JS小- 避免在呈現(xiàn)早期渲染的組件中進(jìn)口大量圖書館。
• 搖樹與代碼分裂並駕齊驅(qū) - 確保刪除未使用的代碼。

示例： import _ from 'lodash'導(dǎo)入lodash ，在整個庫中拉動。相反，請使用import { debounce } from 'lodash-es'僅導(dǎo)入所需的內(nèi)容。

當(dāng)心陷阱

• 由於HTTP開銷（尤其是在HTTP/1上） ，太多的小塊會損害性能。
• 需要處理加載狀態(tài)（例如，有懸念）。
• 如果腳本很大，則第三方腳本（分析，廣告）可以否定收益。

另外，請記?。捍a拆分不會降低總應(yīng)用程序的大小 - 它只是隨著時間的推移擴(kuò)散了負(fù)載。

代碼分裂不是魔術(shù)，但是當(dāng)明智地使用時，它會大大提高感知的性能。結(jié)合懶惰的負(fù)載和良好的捆綁分析，它是現(xiàn)代網(wǎng)絡(luò)性能的基石。

基本上：較少的代碼前期，以後再加載 - 僅在需要時。

以上是了解現(xiàn)代JS應(yīng)用中的捆綁包大小和代碼分裂的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！