webpack异步代码拆分基于路由加载所有路由中的所有块

Question

我在我的反应应用程序中启用了基于路由的分块。

我使用了 require.ensure

require.ensure([], function(require) {
require('./Component1');
});

我的应用包含两条路线 / home 和 / pro

这是我的 route.js

        const React = require('react');
        const ReactRouter = require('react-router');
        const Router = ReactRouter.Router;
        const Route = ReactRouter.Route;
        const browserHistory = ReactRouter.browserHistory;


        var ProHomeContainer = "";
        if (typeof (require.ensure) == "function") {
            ProHomeContainer = require.ensure([], function (require) {
                require('./containers/ProHomeContainer.js');
        },"Home");
        } 

        var HomeContainer = "";
        if (typeof (require.ensure) == "function") {
            HomeContainer = require.ensure([], function (require) {
                require('./containers/HomeContainer.js');
        },"ProHome")
        } 

        export const routes = (
        <Router history={browserHistory} >
            <Route path={'/home'} getComponent={(nextState, callback) => {
                    if (typeof (require.ensure) == "function") {
                        require.ensure([], (require) => {
                            callback(null, require('./containers/HomeContainer.js'));

                        }, "Home")
                    } else {
                        callback(null, require('./containers/HomeContainer.js'), "Home");
                    }
            } } />
            <Route path={'/pro'} getComponent={(nextState, callback) => {
                    if (typeof (require.ensure) == "function") {
                        require.ensure([], (require) => {
                            callback(null, require('./containers/ProHomeContainer.js'));

                        }, "ProHome")
                    } else {
                        callback(null, require('./containers/ProHomeContainer.js'));
                    }
            } } />
        </Router >
        );

Webpack识别 require.ensure 并为/ home和/ pro

创建单独的块 相应地

Home.js 和 ProHomejs 。

现在的问题是，当我打开 / home 时，它只应加载 Home.js （/ home / chunk），但它会加载 ProHome.js < / strong>以及。

如果是这种情况，那么使用基于路由的分块没有任何好处吗？

有没有更好的方法来路由基于分块？请指向正确的资源