React.js 中的代码拆分

react jsjavascript libraryfront end technology更新于 2025/10/24 6:36:17

我们使用诸如 webpack 之类的工具打包 React 应用程序中的文件。打包过程最终会按文件导入的顺序合并这些文件，并创建一个单独的文件。

这种方法的问题在于，打包文件会随着文件数量的增加而变大。用户可能无法加载所有功能组件，但打包过程中仍在加载它们，这可能会影响应用程序的加载。

为了避免这种情况，React 中使用了代码拆分。

示例

打包示例 −

// app.js
import { total } from './math.js';
console.log(total(10, 20)); // 42
// math.js
export function total(a, b) {
   return a + b;
}

Bundle

function total(a, b) {
   return a + b;
}
console.log(total(10, 20)); // 30

代码拆分功能使用延迟加载来仅加载所需的文件。这可以显著提高应用程序的性能。

使用动态导入是延迟加载的简单用例 −

Before

import { total } from './math';
console.log(total(10, 20));

After

import("./math").then(math => {
   console.log(math.total(10, 20));
});

动态导入目前仍未成为官方语言标准的一部分。使用 Babel 时，我们必须使用 babel-plugin-syntax-dynamic-import。

React.lazy 有助于延迟导入组件。

import TestComponent from './ TestComponent ';
function LazyComponentLoadExample() {
   return (
      <div>
         < TestComponent />
      </div>
   );
}

After

const TestComponent = React.lazy(() => import('./TestComponent'));
function LazyComponentLoadExample() {
   return (
      <div>
         <TestComponent />
      </div>
   );
}

使用 Suspense

它是组件延迟加载完成前的后备内容

const TestComponent = React.lazy(() =>import('./TestComponent'));
function SuspenseComponentExample() {
   return (
      <div>
         <Suspense fallback = {<div>Loading...</div>}>
            <TestComponent />
         </Suspense>
      </div>
   );
}

基于路由的代码拆分

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

由于 React.lazy 仅支持默认导出，因此命名导出由中间导出处理，并将其作为默认导出。