0

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

我用过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.jsProHomejs对应。在此处输入图像描述

现在的问题是,当我打开/home时,它​​应该只加载Home.js(/home 的块),但它也会加载ProHome.js

如果是这种情况,那么使用基于路由的分块没有好处吗?

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

4

0 回答 0