React 3.2代码分割_webpack3 react 代码分割-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42469247/article/details/106042393

本文介绍如何在React应用中使用Webpack的动态import()语法和React.lazy函数进行代码分割，实现按需加载，提高应用性能。同时展示了如何在Suspense组件中优雅地处理加载过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打包

大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载

import

应用中引入代码分割的最佳方式是通过动态 import() 语法。
使用前：

import { add } from './math';

console.log(add(16, 26));

使用后：

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

Webpack 解析到该语法时，会自动进行代码分割。

React.lazy

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
使用前：

import OtherComponent from './OtherComponent';

使用后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

此代码将会在组件首次渲染时，自动导入包含 OtherComponent组件的包。
React.lazy 接受一个函数，这个函数需要动态调用import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个defalut export 的 React 组件
然后应在Suspense 组件中渲染lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

基于路由的代码分割

如果说上边的例子是React和React组件的结合，那么这个就是通过React和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>
);