React代碼分割的實現(xiàn)方法介紹

更新時間：2022年12月03日 11:38:06 作者：碼農(nóng)小菲

雖然一直有做react相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來沒有從路由代碼分割這一塊入手過,所以下面這篇文章主要給大家介紹了關(guān)于React中代碼分割的方式,需要的朋友可以參考下

代碼分割

打包是個很棒的技術(shù)，但隨著代碼量的增加，容易出現(xiàn)體積過大而導(dǎo)致加載時間過長。為避免這種情況的出現(xiàn)，在前期就思考該問題并對代碼包進行分割是個不錯的選擇。
對應(yīng)用進行代碼分割能夠幫助你“懶加載”當(dāng)前用戶所需要的內(nèi)容，提高應(yīng)用性能。盡管并沒有減少應(yīng)用整體的代碼體積，但可以避免加載用戶不需要的代碼，并在初始加載的時候減少所需加載的代碼量。
簡單理解：是性能優(yōu)化的一種解決方案。比如我們的路由系統(tǒng)中有100個組件，我們在react項目啟動時不需要對這100個組件都進行編譯，只編譯當(dāng)前URL對應(yīng)的組件，這就可以用到代碼分割的功能；

React.lazy&Suspense

動態(tài)引入

//使用前：
import OtherComponent from './OtherComponent';
//使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'))

在組件首次渲染時，自動導(dǎo)入包含該組件的包
React.lazy 接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用import()。它必須返回一個Promist,該Promise 需要resolve 一個default export 的react組件
然后應(yīng)在 Suspense 組件中渲染 lazy 組件，這樣可以在等待加載 lazy 組件時做優(yōu)雅降級（如 loading 指示器等）

   import React, { Suspense } from 'react';
   const  OtherComponent = React.lazy(() => import('./OtherComponent'))
   const AnotherComponent = React.lazy(() => import('./AnotherComponent'))
   function MyComponent() {
     return (
       <div>
        <Suspense fallback={<div>Loading...</div>}>
           <section>
             <OtherComponent />
             <AnotherComponent />
           </section>
         </Suspense>
       </div>
     );
   }

fallback:接受任何在組件加載過程中你想展示的 React 元素
Suspense 組件置于懶加載組件之上的任何位置

異常捕獲邊界（Error boundaries）

如果模塊加載失?。ㄈ缇W(wǎng)絡(luò)問題），它會觸發(fā)一個錯誤。可以通過異常捕獲邊界（Error boundaries）技術(shù)來處理這些情況，以顯示良好的用戶體驗并管理恢復(fù)事宜。

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
 <div>
   <MyErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>
       <section>
         <OtherComponent />
         <AnotherComponent />
       </section>
     </Suspense>
   </MyErrorBoundary>
 </div>
);

基于路由的代碼分割

可以選擇從路由開始實現(xiàn)代碼分割。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

命名導(dǎo)出（Named Exports）

React.lazy 目前只支持默認導(dǎo)出（default exports）
若導(dǎo)出其他模塊，可以創(chuàng)建一個中間模塊，來重新導(dǎo)出為默認模塊

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));

到此這篇關(guān)于React代碼分割的實現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)React代碼分割內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: