僅在需要時加載代碼來提高React中的代碼可改善性能。 1）使用React.Lazy和懸疑進行基於路線的分裂以減少初始負載。 2）將組件級的懶惰加載用於重型的非關(guān)鍵組件（例如模態(tài)或圖表）。 3）處理命名帶有包裝功能或魔術(shù)評論的命名出口，以更好地命名。 4）遵循最佳實踐：避免過度分割，使用有意義的後備，分析束和測試性能。 5）對於SSR，利用特定於框架的解決方案，例如Next.js Dynamic Imports或Remix的內(nèi)置分配。始終衡量影響並策略性分裂以提供更快，更精簡的應用程序。

React中的代碼分開不是魔術(shù) - 這是一種實用策略，可以通過僅加載所需的代碼來提高應用程序的性能。隨著應用程序的增長，將所有內(nèi)容捆綁到一個JavaScript文件中成為瓶頸。這就是代碼分開的地方。讓我們分解如何有效地掌握它。

為什麼要劃分的代碼很重要

當您使用WebPack或Vite等工具構(gòu)建React應用程序時，所有組件，庫和依賴項都會捆綁在一起。大捆綁包意味著加載時間較慢，尤其是在移動網(wǎng)絡或慢速網(wǎng)絡上。

代碼分配使您可以將代碼分成可以按需加載的較小塊。這導致：

• 更快的初始負載
• 更好的用戶體驗
• 減少內(nèi)存使用情況
• 改進的SEO（通過更快的時間）

目的不是消除JavaScript，而是更聰明。

基於路線的分裂用反應。懶惰和懸念

最有影響力的起點是路線級代碼拆分。大多數(shù)用戶僅訪問您的應用程序的幾頁，那麼為什麼要預先加載它們？

React提供了React.lazy 。為此懶惰和Suspense ：

從“ react”導入{懶惰，懸念}；
導入{browserrouter作為路由器，路由，路由}，從'react-router-dom';

const home = lazy（（）=> import（'./ pages/home'））;
const大約= lazy（（）=> import（'./ pages/of of of of'））;
const contact = lazy（（）=> import（'./ pages/contact'））;

功能應用程序（）{
  返回 （
    <Router>
      <懸浮後置= {<div>加載... </div>}>
        <路線>
          <路由路徑=“ /”元素= {<home />} />
          <路由路徑=“ /about” element = {<of />} />
          <路由路徑=“ /contact”元素= {<Contact />} />
        </outeres>
      </懸浮>
    </router>
  ）；
}

要點：

• React.lazy僅與Dynamic import()一起使用（返回承諾）。
• Suspense包裹懶惰的組件，並在加載時顯示後備。
• 您可以在一個Suspense邊界下具有多個懶惰組件。
• 將Suspense在盡可能靠近組件的懸架中以進行更好的控制。

??不要過度使用Suspense以免懸念非懶惰的內(nèi)容 - 這不是一般的加載解決方案。

超越路線：組件級懶惰

有時，即使在一條路線中，某些組件也很重，但並不是必需的，例如模態(tài)，圖表庫或豐富的文本編輯器。

您也可以懶惰 - 加載這些：

 const Chart = lazy（（）=>導入（'./組件/圖表'））;

功能儀表板（）{
  const [showcharart，setShowchart] = usestate（false）;

  返回 （
    <div>
      <H1>儀表板</h1>
      {showchart &&（（
        <懸浮後置= {<p>加載圖表... </p>}>
          <圖表 />
        </懸浮>
      ）
      <button onclick = {（）=> setShowchart（true）}> show Analytics </button>
    </div>
  ）；
}

這會延遲加載Chart.js或類似的重型庫，直到用戶實際需要它們?yōu)橹埂?/p>

用例：

• 模式和對話
• 大型（例如，入職）
• 媒體上傳器
• 第三方小部件（地圖，日曆）

但是不要懶惰 - 小組不值得開銷。

用命名的出口優(yōu)化捆綁拆分

React.lazy僅支持默認導出，這可能是限制的。這是一個解決方法：

 //組件/modal.js
導出const modal =（）=> {...};
導出const constressionmodal =（）=> {...};

// lazy-wrapper.js
const loadModal =（）=> import（'./ components/modal'）;
導出const lazyModal = lazy（（）=> loadmodal（）。然後（module =>（{default：module.modal}}）））;
導出const lazyconfirmmodal = lazy（（）=> loadmodal（）。然後（module =>（{默認：module.confirmmodal}））））;

現(xiàn)在，您可以單獨命名命名的導出。

另外，請考慮使用Vite或WebPack的魔術(shù)評論來命名塊以更好地調(diào)試：

 const home = lazy（（）=> import（/ * webpackchunkname：“ homepage” */'./pages/home'））;

此名稱生成的文件home-page.js而不是123.chunk.js ，使在DevTools中更容易跟蹤。

最佳實踐和陷阱

這是可以將其分開與掌握它分開的原因：

?做：

• 從路線開始- 最少的努力勝利。
• 使用與您的UI相匹配的懸疑後備（例如，骨架加載器）。
• source-map-explorer或WebPack捆綁包分析儀等工具分析捆綁包。
• 使用import()和Promise.all for高優(yōu)先級路徑進行預加載批量塊。
• 考慮預取（通過@remix-run/router或自定義邏輯在React路由器中）。

?避免：

• 懶惰的微小組件（
• 忘記誤差邊界（將Suspense與ErrorBoundary結(jié)合在一起）。
• Suspense的深層嵌套，沒有明確的後備等級。
• 假設懶惰=始終更快 - 在實際網(wǎng)絡條件下進行測試。

服務器端渲染（SSR）和代碼拆分

如果您使用的是SSR（Next.js，Remix等），則React.lazy具有限制。有些工具比其他工具更好：

• Next.js ：自動代碼按頁面分配。使用dynamic(import, { ssr: false })進行僅客戶端的懶惰加載。
• 混音：基於服務器吸引的加載的內(nèi)置路由分裂。
• 自定義SSR設置可能需要loadable-components來通用懶惰加載。

始終測試水合行為 - 不匹配的懶負荷會導致錯誤。

掌握代碼分配並不是要使用每個功能，而是要知道何時和何時拆分。從路線開始，測量衝擊，然後在重要的情況下以組件級分裂進行完善。結(jié)果？一個感覺更快，更精簡的React應用程序。

基本上：聰明，不僅是因為您可以。

以上是掌握反應中代碼分裂的藝術(shù)的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！