快捷導(dǎo)航

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

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

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

前沿

當(dāng)我們項(xiàng)目越來越大的時(shí)候，代碼的體積會(huì)變得龐大，導(dǎo)致我們項(xiàng)目的加載速度變慢，特別是如果您包含大型第三方庫(kù)。您需要密切關(guān)注包含在bundle中的代碼，以免我們的項(xiàng)目體積太大，導(dǎo)致加載時(shí)間長(zhǎng)，影響用戶體驗(yàn)。在React項(xiàng)目中，我們可以通過以下幾種方式對(duì)代碼進(jìn)行拆分，可以將代碼拆分成小的塊。讓我們的網(wǎng)站速度變快。

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

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

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是一個(gè)高階組件，允許您將代碼拆分為更小的塊并按需加載，支持服務(wù)端渲染，使用方式比較簡(jiǎn)單。

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），以防其組件樹中的某些子組件尚未具備渲染條件。使用方式如下

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

參考