如何使用 react-router 来反应 lazyload 子路由？

Question

现在我正在使用 react-route 来控制我的路线！

你知道我试图构建一个单页应用程序。只有一个条目文件名为 index.js

当index.js太重加载时间会很长。可能是 10000 毫秒。

但是路由很多为什么一定要先全部加载呢？如果我可以延迟加载路由，不仅是子路由。

当我转到 admin 路由时，它将加载 adminjs 文件并且 about 将加载 aboutjs 文件=31=] ，我可以吗？

webpack 包将有两个文件 [name].js 和 come.js。但是太重了。

有人遇到同样的问题吗？

Answer 1

您可以通过两种方式使用 react-router 延迟加载 React 组件。

Webpack的require.ensure方式 当你使用这种方法时，你会像这样处理反应路由器对象，

childRoutes:[
    {
      path:"/pageone",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageOne"));})
    },
    {
      path:"/pagetwo",
      getComponents:(a, cb) => require.ensure([], require => {cb(null, require("pages/PageTwo"));})
    }
  ]

Webpack的bundle-loader方式 当您使用这种方法时，您将处理 webpack 加载程序选项。

module: {
  loaders: [{
    test: /.*/,
    include: [path.resolve(__dirname, 'pages/admin')],
    loader: 'bundle?lazy&name=admin'
   }]
}

您可以找到一个 example from react-router which uses bundle-loader and here is a nice blog about lazy-loading with bundle-loader and here 是 require.ensure

的博客

如何使用 react-router 来反应 lazyload 子路由？

How can react lazyload child route using react-router?

lazy-loading

reactjs

webpack

react-router