How to get the benefits of both dynamic imports and SplitChunksPlugin with Webpack 4?

Question

Is it possible to get the benefits of both dynamic imports and split chunks (SplitChunksPlugin)?

dynamic imports

When I use dynamic imports I get one chunk per library that has been dynamically imported. However, anything that is statically imported gets added to the same (big) bundle. pseudocode:

// my-module.js
const foolib = await import('foolib');
export default foolib('some-arg');

results in:

• foolib.bundle.js contains only foolib, great
• my-module.bundle.js contains my-module and every static import, not great

SplitChunksPlugin

Does the other half of what I want. pseudocode:

// my-module.js
import foolib from 'foolib';
export default foolib('some-arg');

results in:

• my-module.bundle.js contains my-module only, great
• vendors.bundle.js contains all the node_modules dependencies, great

But, this solution lacks dynamic loading.

dynamic imports with custom chunks

The idea is that this config would get me all the things.

• foolib.bundle.js contains only foolib because it was dynamically imported
• my-module.bundle.js contains my-module only
• vendors.bundle.js contains all the node_modules dependencies

---

The results I've gotten so far are that dynamic imports are not considered when you add the optimization key (add the splitChunks) to the webpack.config.js.

In what direction should I further investigate? My hunch is that maybe I can find a way to better tune the way dynamic imports is generating chunks, but maybe I'm wrong?

Answer 1

Check out Paragons. It uses both dynamic imports and split chunks. The BundleAnalyzerPlugin plugin is setup for the production mode. After you generate my-app, you can do npm run build and the client report will be emitted in the dist directory. Here is a sample screenshot:

You can also check out the Webpack config.