React代碼拆分的方法有哪些

本篇內容介紹了“React代碼拆分的方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

動態加載（import）

es6提供import()函數，它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊。
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還有些區別

React Lazy 和 React Suspense

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

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

“React代碼拆分的方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！