详解react-router如何实现按需加载

React-Router 是 React 生态中路由管理的工具，它基于 React 组件树来组织页面路由。 React-Router 支持按需加载路由，又称为懒加载。这个特性让开发者能够更快速地加载应用程序，并且节省了浏览器资源。

实现按需加载的关键是使用动态导入。使用动态导入，我们可以将代码分割成多个小块，并且只在需要的时候去加载这些小块。这样能够大大减小代码量和页面加载时间。

在 React-Router 中涉及到按需加载的核心组件是 React.lazy 和 Suspense。React.lazy是在React16.6版本中引入的，它是一个高阶组件，允许我们在组件渲染期间，将对某个模块的导入延迟到组件真正需要被渲染的时候。而Suspense则是用于在组件渲染之前等待异步模块加载完成。这两个组件的配合使得按需加载得以实现。

步骤：

1.安装React-Router和@babel/plugin-syntax-dynamic-import：

2.在babel配置文件中加入@babel/plugin-syntax-dynamic-import


  "presets": [
    "react-app"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import"
  ]
}


3.使用React.lazy从指定路径引入需要延迟加载的组件：




这里MyComponent是需要被延迟加载进来的组件，如果组件需要从另一个文件中被加载，则需要将文件路径传递给import()，例如：




4.使用<Suspense/>来包裹延迟加载的组件：


  <Suspense fallback={<div>Loading...</div>}>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      <Route path="/dashboard" component={Dashboard} />
    </Switch>
  </Suspense>
</Router>


5. 在导入路由页面组件时使用React.lazy导出




6. 还要使用webpack的魔法注释，来调整每个文件的名称，以便于在生成的构建资产中查找正确的分块文件。




这样的话webpack就会按需加载生成的chunk。

React-Router可以轻松实现按需加载，并且通过React.lazy和 Suspense两个API更加方便实现延迟加载，使得应用程序能够快速加载，并且节省浏览器的资源。