路由切割是在项目中一种性能优化方案，在以前react想实现路由切割非常的麻烦，要么自己配置要么使用第三方库如 react-loadable， 现在你可以完全打破这种想法！

我没记错的话react-v16.6.0 已经支持路由懒加载， 意思就是不用再依赖第三方库了，这是一个非常好的功能。

路由懒加载实现

react实现懒加载变得非常的简单了，2个核心API

• React.lazy
  • 动态加载路由组件
• React.Suspense
  • 路由加载完之前，可以用来显示Loading

代码:

import React, {
  lazy,
  Suspense
} from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import FallbackLoading from '@/components/fallbackLoading/FallbackLoading';

const Home = lazy(() => import('@/views/Home'));

const routes = function () {
  return (
    <Router>
      <Suspense fallback={FallbackLoading()}>
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  )
};

export default routes;

Suspense 组件是必选的，否则会报错。 fallback属性是在路由加载完之前显示一个Loading组件。

注意：Suspense必须放在Switch之前，因为Switch组件下面必须是Route，否则会有其他意想不到的事情。