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

现在我使用react-route来控制我的路线！如何使用react-router来对lazyload子路由做出反应？

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

当index.js过重时加载时间会很长。也许10000ms。

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

当我去admin路线，将负载管理的js文件和about将装载约js文件，可以吗？

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

任何人都遇到同样的问题？

来源

2017-01-05 mqliutie

您可以用两种方法对react-router进行延迟加载。

的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它采用bundle-loader和here约延迟加载与包装载机和here一篇好的博客的example是require.ensure

来源

2017-01-05 06:58:12 Thaadikkaaran

我曾试图用这种方式博客 ** getComponent = {（nextState，cb）=> {cb（null，require（'./ components/menu/MenuComboMain.react'）。default）}} ** on Route元素这样做是否有一些优点，缺点与你的 – mqliutie

只是'需要'无线将所有模块捆绑在一起。 'require.ensure'将创建单独的文件来延迟加载模块 – Thaadikkaaran

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

回答

相关问题