webpack-contrib/react-proxy-loader

Combine Chunks

Retired opened this issue · 3 comments

This might be a novice question that might be solved with the CommonsChunkPlugin but unfortunately, I have been successful in my experimentation.

I'm using this with react-router in the following manner.

module.exports = {
    Subapp: require("react-proxy-loader!./components/subapp/Base.jsx"),
    Child: require("react-proxy-loader!./components/subapp/Child.jsx"),
};

The module is required into another file that houses all of the route definitions for the React app.

var exampleHandlers = require("./exampleHandlers.js");
...
<Route path=“subapp“ handler={exampleHandlers.Subapp}>
    <Route path=“childView” handler={exampleHandlers.Child} />
</Route>

Because both modules use the react-proxy-loader, two extra files are generated in addition to the bundle.js (for all the modules that were NOT passed through the react-proxy-loader). The loader also appears to have done its job perfectly since these files are only loaded when the appropriate path is navigated to.

Current:

bundle.js (entry point)
1.bundle.js
2.bundle.js

However, my questions is that since these two paths are somewhat related and since they are relatively individually small, is it possible to bundle together 1.bundle.js and 2.bundle.js into something like subapp.bundle.js?

Desired:

bundle.js (entry point)
subapp.bundle.js

Perhaps related - if in the future, if one is to add another "subapp" using another module much like the one declared above, is there some way to also bundle that into its own bundle that will be loaded whenever some React component in that bundle is needed?

In other words, some scenario like this...

bundle.js (entry point)
subapp.bundle.js
subappSecond.bundle.js

where subappSecond.bundle.js will be loaded if one navigates directly to /subapp2/childView.

#5 will fix this.

module.exports = {
    Subapp: require("react-proxy-loader?name=subapp!./components/subapp/Base.jsx"),
    Child: require("react-proxy-loader?name=subapp!./components/subapp/Child.jsx"),
};

Ah, didn't know it was related to another issue. Sorry for taking so long to reply back and thanks for your work!