React的动态加载lazy import()

一、动态加载能解决的问题：

网站每增加一个功能/页面就会增加代码，导致打包文件体积随着功能的增加而增加，文件过大部署以后访问速度缓慢；动态加载可以把代码拆分为多份，只加载需要的代码。

二、使用：

1、修改tsconfig.json
由于import()只是ECMAScript（JavaScript）提案，如果不加入"module": "esnext",编辑器会报红

{
  "compilerOptions": {
    "noImplicitAny": false,
    "declaration": false,
    "target": "es6",
    "module": "esnext", // 加入这句
    ...}
  ...}

2、使用react.lazy动态导入组件：
lazy 函数允许您渲染动态导入为常规组件。

import React, { lazy, Suspense } from 'react';
const CIPage = lazy(() => import("./pages/ChangeIllness/index"));

export default class Test extends React.PureComponent<Props,any> {
  render() {
    return (
      <div>
        <Suspense fallback={<div className="com-loading">正在加载...</div>}>
          <CIPage/>
        </Suspense>
      </div>
    )
   }
 }

3、必须使用Suspense：
如果在渲染时尚未加载包含 CIPage 的模块，我们必须在等待加载时显示一些后备内容 - 例如加载指示符。 这是使用Suspense 组件完成的。

4、在路由中使用：
由于使用dva的router，直接component={CIPage}会报警告，component得是个函数啥的，所以必须写成component={() => <CIPage />}

5、完整代码：

import React, { lazy, Suspense } from 'react';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { Router, Route, Switch, Redirect } from 'dva/router';
import Root from './layout/root';
// import CIPage from "./pages/ChangeIllness/index";

const CIPage = lazy(() => import("./pages/ChangeIllness/index"));
const BASE_URL = `${process.env.BASE_PATH}`;
const ROUT_ARR = [];

// 路由配置
function RouterConfig({ history, app }) {
  return (
    <ConfigProvider locale={zhCN}>
      <Router history={history}>
        <Suspense fallback={<div className="com-loading">正在加载...</div>}>
          <Switch>
            <Route path={`${BASE_URL}/changeIllness`} key='changeIllness' exact component={() => <CIPage />} />
            <Route path="/" render={(props) => (
              <Root>
                <Switch>
                  {ROUT_ARR.map((item, i) => (
                    <Route path={`${BASE_URL}${item.path}`} key={i} exact component={item.component} />
                  ))}
                  <Route path={BASE_URL === '' ? '/' : BASE_URL} exact render={() => <Redirect to={`${BASE_URL}/common`} />} />
                </Switch>
              </Root>
            )} />
          </Switch>
        </Suspense>
      </Router>
    </ConfigProvider>
  );
}

export default RouterConfig;