Back to Details

route-based

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Route Based Splitting

基于路由的代码分割

We can request resources that are only needed for specific routes, by adding route-based splitting. By combining React Suspense or 
loadable-components
with libraries such as 
react-router
, we can dynamically load components based on the current route.
By lazily loading the components per route, we're only requesting the bundle that contains the code that's necessary for the current route. Since most people are used to the fact that there may be some loading time during a redirect, it's the perfect place to lazily load components!
我们可以通过添加基于路由的代码分割，仅请求特定路由所需的资源。将React Suspense或
loadable-components
与
react-router
等库结合使用，我们就能根据当前路由动态加载组件。
通过按路由懒加载组件，我们只会请求包含当前路由所需代码的包。由于大多数人已经习惯了页面跳转时可能存在的加载时间，这正是懒加载组件的绝佳场景！

When to Use

使用场景

  • Use this when your application has multiple routes and not all code is needed on every page
  • This is helpful for reducing initial load time by only loading code for the current route
  • 当你的应用有多个路由，且并非所有代码都在每个页面都需要时使用此方法
  • 这有助于通过仅加载当前路由的代码来缩短初始加载时间

Instructions

操作步骤

  • Combine React Suspense or 
    loadable-components
    with routing libraries like 
    react-router
  • Lazily load page-level components per route for optimal code splitting
  • Take advantage of natural loading pauses during route transitions for a seamless experience
  • 将React Suspense或
    loadable-components
    与
    react-router
    等路由库结合使用
  • 按路由懒加载页面级组件，以实现最优的代码分割
  • 利用路由切换过程中的自然加载停顿，实现流畅的用户体验

Source

来源