淺談React Router動態路由

1、webpack的codesplitting

webpack可以通過require.ensure接口實現按需加載。

require.ensure保證了模塊的異步調用，當callback回調中調用了一個模塊時，可以實現按需加載。

require.ensure([], function() {
 	callback(null, require('…'));
  	//...
});

 

2、react-router實現按需加載

按需加載的作用：主要可以減少首頁請求的文件的大小。

在react-router中，可以通過getChildRoutes、getIndexRoute、getComponents三個接口結合webpack的code splitting，通過切換路由實現按需加載。

react-router定義了getChildRoutes、getIndexRoute、getComponents這3個方法，這3個方法是異步的，且只在需要時調用，通過這3個方法定義的路由，稱之爲“漸進式路由匹配”——react-router在匹配到路由時，只是漸進式地加載該路由所需的組件，這樣就能實現按需加載。

eg：

import { rootdir } from '../config';
const getIndexRoute = ({ location }, callback) => {
    require.ensure([], () => {
        callback(null, {
            component: require('./Home'),
        });
    }, 'public/home');
};
const getChildRoutes = ({ location }, callback) => {
    const sliced = location.pathname.slice(rootdir.length);
    if(sliced.indexOf('todos') !== -1) {
        require.ensure([], () => {
            callback(null, require('./todos.routes'));
        }, 'public/todos');
        return;
    }
    callback(null, []);
}

注意：

1、require方法的參數不能使用變量，只能使用字符串，如require('./Home')。

2、如果在路由頁面使用了require.ensure這種按需加載路由級組件的方式，則在其他地方（包括本頁面）就不要再import了，否則不會打包生成chunk文件。也就是說，需要按需加載的路由級組件必須在路由頁面進行加載，任何地方都不能通過import引入按需加載的組件。