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

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

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

代碼分割

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

React.lazy&Suspense

動(dòng)態(tài)引入

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

在組件首次渲染時(shí)，自動(dòng)導(dǎo)入包含該組件的包
React.lazy 接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用import()。它必須返回一個(gè)Promist,該P(yáng)romise 需要resolve 一個(gè)default export 的react組件
然后應(yīng)在 Suspense 組件中渲染 lazy 組件，這樣可以在等待加載 lazy 組件時(shí)做優(yōu)雅降級(jí)（如 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ǎng)絡(luò)問題），它會(huì)觸發(fā)一個(gè)錯(cuò)誤?？梢酝ㄟ^異常捕獲邊界（Error boundaries）技術(shù)來處理這些情況，以顯示良好的用戶體驗(yàn)并管理恢復(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>
);

基于路由的代碼分割

可以選擇從路由開始實(shí)現(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 目前只支持默認(rèn)導(dǎo)出（default exports）
若導(dǎo)出其他模塊，可以創(chuàng)建一個(gè)中間模塊，來重新導(dǎo)出為默認(rèn)模塊

// 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代碼分割的實(shí)現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)React代碼分割內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: