react路由切割按需加载

发布时间:2019-04-27

路由切割是在项目中一种性能优化方案,在以前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,否则会有其他意想不到的事情。

React
广告