使用React v16.9的Lazy-loading懒加载组件，进行路由封装

使用 Suspense和 React.lazy()，进行代码分割和懒加载组件:

code-splitting

React官网有相关代码分离的说明，这里再也不赘述，使用 import() 动态导入会更加有利于代码的分离。

关于import()语法，若是你使用CRA（create-react-app）搭建的项目，能够直接使用这个语法。若是是本身从零开始搭建的项目，须要babel的插件 babel-plugin-syntax-dynamic-import;

yarn add babel-plugin-syntax-dynamic-import
or
npm install babel-plugin-syntax-dynamic-import
复制代码

.babelrc 或者 babel.config.js 中增长：

{
  "plugins": ["syntax-dynamic-import"]
}
复制代码

React.lazy()

React.lazy()容许你渲染一个动态引入的组件像普通组件同样执行;

React.lazy 可接受一个返回Promise的调用import()的function，这个promise最后resolve一个默认导出当前组件。

通常写法：

import React, {lazy} from "react";

// 默认后缀 .jsx
const App = lazy(()=> import("../pages/App"));
const About = lazy(()=> import("../pages/About"));

// 路由配置
const routerConfig = [
    {
        path: '/',
        component: App
    },
    {
        path: '/about',
        component: About
    },
];

function AppRouter() {
  return (
      <Suspense fallback={<div>Loading...</div>}>
        <Router basename="/">
			<Switch>
				{routerConfig.map((n, index) => {
					return <Route path={n.path} exact component={n.component} key={index}></Route>;
				})}
			</Switch>
        </Router>
      </Suspense>
  );
}

export default AppRouter;
复制代码

Lazy组件须要反之在 Suspense 组件内部, Suspense 提供一个 fallback 内容填充，当正在懒加载组件的时候，好比加个loading;

咱们下面对lazy进行二次封装：

// lazy load
const lazyLoad = path =>
    lazy(() => {
        return new Promise(resolve => setTimeout(resolve, 1 * 1000)).then(() => import(`../pages/${path}`)).catch(() => import('../components/Error'));
	});
//这个方法须要注意的一点，这个 path 不能直接传`相对路径`相似 `../pages/App`, 
//会找不到组件，因此最好只传过来一个组件名字，而后内部拼接相对路径
//另外在后面加了一个Promise的reject状态处理，若是组件加载错误，将会默认加载Error组件；
import Loading from '@c/Loading';
const App = lazyLoad('App');
const About = lazyLoad('About');

function AppRouter() {
    return (
		<Suspense fallback={<Loading />}>
			{/* 只有当你的应用部署到服务器的二级目录的时候，才须要设置basename */}
			{/* <Router basename="/"> */}
			<Router basename="/">
				<Switch>
					{routerConfig.map((n, index) => {
						return <Route path={n.path} exact component={n.component} key={index}></Route>;
					})}
				</Switch>
			</Router>
		</Suspense>
    );
}

export default AppRouter;
复制代码

这样就完成了懒加载路由的简单封装。