Как отреагировать lazyload на дочерний маршрут с помощью реактивного маршрутизатора?

Question

Теперь я использую react-route для управления своими маршрутами!

Вы знаете, что я попытался создать одностраничное приложение. Существует только один файл записи: index.js

Когда index.js слишком тяжелое время загрузки очень долгое время. Может быть, 10000 мс.

Но есть много маршрутов, почему нужно сначала их загружать? Если я могу lazyload маршрут не только детские маршруты.

Когда я иду в admin маршрут будет загружать JS файл администратора и about загрузит JS файл около, могу ли я?

пакет для веб-пакета будет иметь два файла [имя] .js и come.js. Но это слишком тяжело.

Кто-нибудь встречает ту же проблему?

Answer 1

Вы можете выполнять ленивую загрузку React Components с помощью 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 пути Когда вы идете с этим подходом, вы будете иметь дело с загрузчиком веб-пакетов.

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

Вы можете найти example из react-router, который использует bundle-loader и here хороший блог о ленивой загрузке с расслоением-погрузчиком и here блог с require.ensure