webpack async code splitting based on routes loads all chunks in all the routes

Question

I have enabled route based chunking in my react application.

I have used require.ensure

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

My app contains two routes /home and /pro

Here is my 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 identifies the require.ensure and creates a separate chunk for /home and /pro

Home.js and ProHomejs correspondingly.

Now the problem is when I open /home it should load only Home.js (chunk of /home) but it will load ProHome.js as well.

If this is the case then there is no benefit of using route based chunking ?

Is there any better way to route based chunking ? Please point to right resources