React?代碼拆分的幾種方法示例詳解

更新時間：2023年03月06日 08:42:05 作者：杰出D

這篇文章主要為大家介紹了React?代碼拆分的幾種方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前沿

當我們項目越來越大的時候，代碼的體積會變得龐大，導致我們項目的加載速度變慢，特別是如果您包含大型第三方庫。您需要密切關注包含在bundle中的代碼，以免我們的項目體積太大，導致加載時間長，影響用戶體驗。在React項目中，我們可以通過以下幾種方式對代碼進行拆分，可以將代碼拆分成小的塊。讓我們的網站速度變快。

動態(tài)加載（import）

es6提供import()函數，它是運行時執(zhí)行，也就是說，什么時候運行到這一句，就會加載指定的模塊。
import()返回一個 Promise 對象。在React中，我們可以這樣去做。通過打包工具，會在打包的過程中對PageModuels生成單獨的文件，在運行的時候異步加載

import React, { useState, useEffect } from 'react';
const Index = () => {
  const [Cmp, setCmp] = useState(null);
  useEffect(() => {
    import('./PageModules').then((mod) => setCmp(mod.default));
  }, []);
  return Cmp ? <Cmp /> : <div>Loading...</div>;
};

loadable component

Loadable Components是一個高階組件，允許您將代碼拆分為更小的塊并按需加載，支持服務端渲染，使用方式比較簡單。

import loadable from '@loadable/component'
const OtherComponent = loadable(() => import('./OtherComponent'))
function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  )
}

它和我們接下來要介紹的React.lazy還有些區(qū)別，可參考 loadable-components.com/docs/loadab…

React Lazy 和 React Suspense

React Lazy是react官方提供的解決方案，非常推薦使用該方案去做代碼拆分.需要React.Suspense配合，該組件可以指定加載指示器（loading indicator），以防其組件樹中的某些子組件尚未具備渲染條件。使用方式如下

// 該組件是動態(tài)加載的
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    // 顯示 <Spinner> 組件直至 OtherComponent 加載完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

參考

loadable component官網
React Lazy

結束語

如果是新的項目且不需要服務端渲染，推薦使用React.lazy。如果需要服務端渲染的話，推薦使用loadable component。小伙伴們可以分析下你們項目的依賴，把一些模塊拆成獨立的模塊，減少代碼體積。

以上就是React 代碼拆分的幾種方法示例詳解的詳細內容，更多關于React 代碼拆分的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

簡析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡析,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-09-09
歸納總結Remix?表單常用方法及示例詳解
這篇文章主要為大家歸納總結了Remix?表單常用方法及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
淺談React的React.FC與React.Component的使用
本文主要介紹了React的React.FC與React.Component的使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
React修改數組對象的注意事項及說明
這篇文章主要介紹了React修改數組對象的注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
React在弱網環(huán)境下限制按鈕多次點擊,防止重復提交問題
這篇文章主要介紹了React在弱網環(huán)境下限制按鈕多次點擊,防止重復提交問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
React Grid Layout基礎使用示例教程
React Grid Layout是一個用于在React應用程序中創(chuàng)建可拖拽和可調整大小的網格布局的庫,通過使用React Grid Layout,我們可以輕松地創(chuàng)建自適應的網格布局,并實現拖拽和調整大小的功能,本文介紹了React Grid Layout的基礎使用方法,感興趣的朋友一起看看吧
2024-02-02
react實現todolist的增刪改查詳解
這篇文章主要為大家介紹了react實現todolist的增刪改查，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
關于React中setState同步或異步問題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細的介紹一下React中setState同步或異步問題，感興趣的可以了解一下
2021-11-11
詳解使用React全家桶搭建一個后臺管理系統(tǒng)
本篇文章主要介紹了使用React全家桶搭建一個后臺管理系統(tǒng)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
React?Hooks之usePolymerAction抽象代碼結構設計理念
這篇文章主要為大家介紹了React?Hooks之usePolymerAction抽象代碼結構設計理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09