如何使用 react-router 响应延迟加载子路由？

Question

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

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

当index.js 太重时加载时间会很长。也许 10000 毫秒。

但是有很多路由为什么必须先加载它们？如果我可以延迟加载路由不仅是子路由。

当我去admin路由时，它会加载admin的js文件，about会加载about的js文件，可以吗？

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'
   }]
}

你可以从react-router 找到一个example，它使用bundle-loader，here 是一个关于使用 bundle-loader 进行延迟加载的不错的博客，here 是一个使用 require.ensure 的博客