我在我的反应应用程序中启用了基于路由的分块。
我用过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时,它应该只加载Home.js(/home 的块),但它也会加载ProHome.js。
如果是这种情况,那么使用基于路由的分块没有好处吗?
有没有更好的方法来路由基于分块?请指出正确的资源