Wie kann reagieren lazyload Kind Route mit react-Router?

Question

Jetzt verwende ich react-route, um meine Routen zu steuern!

Sie wissen, ich habe versucht, eine einzelne Seite App zu bauen. Es gibt nur einen Eintrag Datei mit dem Namen index.js

Wenn index.js ist zu schwer Ladezeit wird sehr lang. Vielleicht 10000ms.

Aber es gibt viele Wege, warum müssen sie alle zuerst geladen werden? Wenn ich Lazyload Route nicht nur Kinderrouten.

Als ich nach admin Weg gehen wird es js Datei admin laden und aboutjs Datei von etwa geladen wird, kann ich das?

Das Webpack-Paket enthält zwei Dateien [name] .js und come.js. Aber es ist zu schwer.

Wer trifft das gleiche Problem?

Answer 1

Sie können das reaktive Laden von React Components mit react-router auf zwei Arten tun.

Webpack der require.ensure Weg Wenn Sie mit diesem Ansatz gehen, würden Sie mit dem Router Objekt so etwas,

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 der bundle-loader Weg Wenn Sie mit diesem Ansatz gehen reagieren tun werden, Sie würden mit der Webpack-Loader-Option arbeiten.

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

Sie ein example von react-router finden können, die bundle-loader und here verwendet ein schönes Blog über den Lazy-Laden mit Bündel-Laders und here ein Blog mit require.ensure ist

ist