随着 Web 应用的发展，前端应用的规模越来越大，代码也越来越复杂。为了提高应用的性能和用户体验，我们需要将代码进行分割，实现按需加载。React 作为目前很流行的前端框架，也提供了很好的支持，本文将介绍 React SPA 应用中如何进行代码分割实现按需加载。

什么是代码分割？

代码分割是指将应用的代码分成几个部分，只加载当前需要的部分，而不是将整个应用一次性加载到浏览器中。这样可以大大减少首次加载时间和页面大小，提高应用的性能和用户体验。

React 中的代码分割

React 提供了 React.lazy 和 Suspense 两个 API，用于实现组件的按需加载。React.lazy 允许你定义一个动态加载的组件，而 Suspense 则可以在组件加载完成前显示一个 loading 界面，提高用户体验。

实现方法

首先，我们需要安装 react-router-dom 和 react-loadable 两个依赖包。react-router-dom 用于实现路由，react-loadable 则用于实现按需加载。

npm install --save react-router-dom react-loadable

接下来，我们可以定义一个动态加载的组件，例如：

import React from 'react';

const AsyncComponent = Loadable({
  loader: () => import('./component'),
  loading: () => <div>Loading...</div>,
});

export default AsyncComponent;

其中，Loadable 是 react-loadable 提供的一个函数，用于定义动态加载的组件。loader 参数表示加载组件的路径，loading 参数则表示组件加载过程中显示的 loading 界面。

接着，我们可以在路由中使用动态加载的组件，例如：

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import AsyncComponent from './AsyncComponent';

const App = () => (
  <BrowserRouter>
    <Route exact path="/" component={AsyncComponent} />
    <Route path="/about" component={AsyncComponent} />
  </BrowserRouter>
);

export default App;

最后，我们需要使用 Suspense 组件来包裹动态加载的组件，例如：

import React, { Suspense } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import AsyncComponent from './AsyncComponent';

const App = () => (
  <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Route exact path="/" component={AsyncComponent} />
      <Route path="/about" component={AsyncComponent} />
    </Suspense>
  </BrowserRouter>
);

export default App;

这里，fallback 属性表示组件加载过程中显示的 loading 界面。

总结

代码分割是提高应用性能和用户体验的重要手段，React 提供了很好的支持。通过使用 React.lazy 和 Suspense 两个 API，我们可以轻松地实现组件的按需加载。在实际开发中，我们可以根据应用的实际情况，灵活运用代码分割技术，提高应用的性能和用户体验。

示例代码

完整的示例代码可以在以下链接中找到：

https://github.com/reactjs/reactjs.org/tree/master/content/docs/code-splitting/code-splitting

React SPA application: How to implement code splitting to achieve on-demand loading

With the development of web applications, the size and complexity of front-end applications are increasing. In order to improve the performance and user experience of the application, we need to split the code and achieve on-demand loading. React, as a popular front-end framework, also provides good support. This article will introduce how to implement code splitting to achieve on-demand loading in React SPA applications in detail.

What is code splitting?

Code splitting refers to dividing the application code into several parts, and only loading the current required part, instead of loading the entire application into the browser at once. This can greatly reduce the first loading time and page size, improving the performance and user experience of the application.

Code splitting in React

React provides two APIs, React.lazy and Suspense, to implement on-demand loading of components. React.lazy allows you to define a dynamically loaded component, and Suspense can display a loading interface before the component is loaded, improving the user experience.

Implementation

First, we need to install two dependency packages, react-router-dom and react-loadable. react-router-dom is used to implement routing, and react-loadable is used to implement on-demand loading.

npm install --save react-router-dom react-loadable

Next, we can define a dynamically loaded component, for example:

import React from 'react';

const AsyncComponent = Loadable({
  loader: () => import('./component'),
  loading: () => <div>Loading...</div>,
});

export default AsyncComponent;

Here, Loadable is a function provided by react-loadable for defining dynamically loaded components. The loader parameter represents the path to load the component, and the loading parameter represents the loading interface displayed during the loading process.

Then, we can use the dynamically loaded component in the route, for example:

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import AsyncComponent from './AsyncComponent';

const App = () => (
  <BrowserRouter>
    <Route exact path="/" component={AsyncComponent} />
    <Route path="/about" component={AsyncComponent} />
  </BrowserRouter>
);

export default App;

Finally, we need to use the Suspense component to wrap the dynamically loaded component, for example:

import React, { Suspense } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import AsyncComponent from './AsyncComponent';

const App = () => (
  <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Route exact path="/" component={AsyncComponent} />
      <Route path="/about" component={AsyncComponent} />
    </Suspense>
  </BrowserRouter>
);

export default App;

Here, the fallback attribute represents the loading interface displayed during the loading process.

Conclusion

Code splitting is an important means to improve application performance and user experience. React provides good support for this. By using the React.lazy and Suspense APIs, we can easily achieve on-demand loading of components. In actual development, we can flexibly use code splitting technology according to the actual situation of the application to improve its performance and user experience.

Example code

The complete example code can be found at the following link:

https://github.com/reactjs/reactjs.org/tree/master/content/docs/code-splitting/code-splitting

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658d6526eb4cecbf2d35a161