如何基于路由结合React Loadable与React Router实现预加载？

我来帮你把这个用React Router + React Loadable实现路由级代码分割的方案整理得更清晰，方便参考和落地：

这种方案能有效拆分应用代码包，减少首屏加载体积，提升应用性能。下面是完整的代码示例和说明：

1. 安装依赖 #

首先确保你已经安装了所需的包：

npm install react-router-dom react-loadable
# 或者用yarn
yarn add react-router-dom react-loadable

2. 自定义Loading组件（可选但推荐） #

先写一个通用的加载中组件，用来在组件加载过程中给用户反馈：

// components/Loading.js
import React from 'react';

const Loading = ({ error, pastDelay }) => {
  // 如果加载出错
  if (error) {
    return <div>Oops, something went wrong!</div>;
  }
  // 如果加载延迟超过一定时间（默认200ms），显示加载状态
  else if (pastDelay) {
    return <div>Loading...</div>;
  }
  // 加载很快的话，不显示内容，避免闪烁
  else {
    return null;
  }
};

export default Loading;

3. 编写组件Loader #

以Component1Loader为例，用React Loadable包裹实际的业务组件：

// components/Component1Loader.js
import React from 'react';
import Loadable from 'react-loadable';
import Loading from './Loading';

const LoadableComponent = Loadable({
  // 动态导入实际组件，实现按需加载
  loader: () => import('./ActualComponent1'),
  // 加载过程中显示的组件
  loading: Loading,
  // 可选：设置延迟显示加载组件的时间（默认200ms）
  delay: 200,
});

// 用类组件包裹是为了兼容一些老版本的React Router，也可以直接导出LoadableComponent
export default class Component1Loader extends React.Component {
  render() {
    return <LoadableComponent {...this.props} />;
  }
}

同样的方式可以编写Component2Loader，只需要把import('./ActualComponent1')换成import('./ActualComponent2')即可。

4. 在App.js中配置路由 #

把Loader组件作为路由的component属性传入，实现路由级的按需加载：

// App.js
import React from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Component1Loader from './components/Component1Loader';
import Component2Loader from './components/Component2Loader';

const history = createBrowserHistory();

function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route exact path="/page1" component={Component1Loader} />
        <Route exact path="/page2" component={Component2Loader} />
        {/* 可以添加其他路由，比如首页、404页面等 */}
        <Route path="/" component={() => <div>Home Page</div>} />
      </Switch>
    </Router>
  );
}

export default App;

一些实用提示 #

• 代码分割后的包分析：可以用webpack-bundle-analyzer工具查看分割后的包结构，优化拆分策略
• 错误处理：Loading组件里的error参数可以用来捕获组件加载失败的情况，做友好的错误提示
• 预加载：如果用户很可能会访问某个路由，可以在适当的时机调用LoadableComponent.preload()提前加载组件，提升切换速度

内容的提问来源于stack exchange，提问作者Evanss