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 {
  render() {
    return (
      

        正在加载...
}>
          
        
      

) } }

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

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

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 (
    
      
        正在加载...

}> } /> ( {ROUT_ARR.map((item, i) => ( ))} } /> )} /> ); } export default RouterConfig;