代碼分割

// app.js
import { add } from './math.js';
console.log(add(16, 26)); // 42

大多數(shù)React應(yīng)用程序?qū)⑹褂肳ebpack、Rollup或Browserify等構(gòu)建工具來打包文件。打包是將文件引入并合并到單個(gè)文件中，最后形成一個(gè)“包”的過程。然后在頁(yè)面上引入捆綁包，整個(gè)應(yīng)用程序可以一次加載

function add(a, b) {
  return a + b;
}
console.log(add(16, 26)); // 42

小心： 最后，包文件將與上面的示例非常不同。 如果使用的是Create React App、Next Js、Gatsby或類似工具，將擁有一個(gè)可直接用于打包的Webpack配置。 如果不使用這些工具，則需要自己配置它們。例如，查看Webpack文檔中的安裝和入門教程。

分割

打包是一項(xiàng)偉大的技術(shù)，但隨著應(yīng)用程序的增長(zhǎng)，代碼包也會(huì)隨之增長(zhǎng)。尤其是在集成大型第三方庫(kù)的情況下。需要注意代碼包中包含的代碼，以避免由于容量過大而導(dǎo)致加載時(shí)間過長(zhǎng)。 為了避免創(chuàng)建大型代碼包，在早期階段考慮這個(gè)問題并劃分代碼包是一個(gè)不錯(cuò)的選擇。代碼分區(qū)是Webpack、Rollup和Browserify（factor bundle）等打包程序支持的技術(shù)，它可以創(chuàng)建多個(gè)包并在運(yùn)行時(shí)動(dòng)態(tài)加載它們。 應(yīng)用程序的代碼分段可以幫助“懶惰地加載”當(dāng)前用戶所需的內(nèi)容，并可以顯著提高應(yīng)用程序的性能。雖然它不會(huì)減少應(yīng)用程序的總代碼量，但可以避免加載用戶永遠(yuǎn)不需要的代碼，并減少在初始加載時(shí)需要加載的代碼量。

import { add } from './math';
console.log(add(16, 26));

import("./math").then(math => {
  console.log(math.add(16, 26));
});

當(dāng)Webpack解析此語(yǔ)法時(shí)，它將自動(dòng)拆分代碼。如果使用CreateReact應(yīng)用程序，則該功能已被開箱即用，可以立即使用該功能。下一個(gè)Js在沒有配置的情況下也支持此功能。 如果自己配置Webpack，可能需要閱讀Webpack的代碼拆分指南。的Webpack配置應(yīng)該與此類似。 當(dāng)使用Babel時(shí)，應(yīng)該確保Babel能夠解析動(dòng)態(tài)導(dǎo)入語(yǔ)法，而不是轉(zhuǎn)換它。對(duì)于這個(gè)需求，需要babel插件語(yǔ)法導(dǎo)入插件。

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

當(dāng)組件首次呈現(xiàn)時(shí)，此代碼將自動(dòng)導(dǎo)入包含OtherComponent組件的包。 反應(yīng)Lazy接受需要?jiǎng)討B(tài)調(diào)用import（）的函數(shù)。它必須返回一個(gè)promise，這需要解析dealout導(dǎo)出的React組件。 然后，應(yīng)該在Suspense組件中呈現(xiàn)懶惰組件，以便我們可以在等待加載懶惰組件時(shí)使用優(yōu)雅的降級(jí)（如加載指示符）。

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

回退屬性接受在加載組件期間要顯示的任何React元素。可以將Suspend組件放置在延遲加載組件上方的任何位置。甚至可以用一個(gè)Suspend組件包裝多個(gè)延遲加載組件。

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>
);

基于路由的代碼分割

決定在哪里引入代碼分段需要一些技巧。需要確保所選位置可以均勻地拆分代碼包，而不會(huì)影響用戶體驗(yàn)。 一個(gè)好的選擇是從路由開始。大多數(shù)web用戶習(xí)慣于在頁(yè)面之間進(jìn)行加載和切換過程。還可以選擇重新渲染整個(gè)頁(yè)面，這樣用戶在渲染時(shí)就不必與頁(yè)面上的其他元素交互。 以下是如何在應(yīng)用程序中使用React的示例。第三方庫(kù)（如lazy和React Router）用于配置基于路由的代碼拆分。

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>
);

反應(yīng)Lazy當(dāng)前僅支持默認(rèn)導(dǎo)出。如果要導(dǎo)入的模塊使用命名導(dǎo)出，則可以創(chuàng)建一個(gè)中間模塊作為默認(rèn)模塊重新導(dǎo)出。這確保了樹抖動(dòng)不會(huì)出錯(cuò)，并且不會(huì)引入不必要的組件。 反應(yīng)Lazy和Suspend技術(shù)尚不支持服務(wù)器端渲染。如果想在使用服務(wù)器端渲染的應(yīng)用程序中使用它，我們建議使用可加載組件。它有一個(gè)很棒的服務(wù)器端渲染和打包指南。