如何使用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子路由做出反應？

回答

相關問題