Webpack 4 SplitChunksPlugin - Common dependencies in Dynamic Imports

Question

I'm using Dynamic imports with Webpack, as per the documentation: https://webpack.js.org/guides/code-splitting/#dynamic-imports

Very basic example (not actual code):

// main.js

import('./moduleA).then((moduleA) => {
  moduleA.init();
});
import('./moduleB).then((moduleB) => {
  moduleB.init();
});

// moduleA.js

import utility from './utility';
export function init() {...}

// moduleB.js

import utility from './utility';
export function init() {...}

The problem is that the utility module is included in both moduleA and moduleB chunks, so it's duplicated. I can't find a way to get Webpack to split these types of dependencies into a separate common chunk like it does with standard imports. The SplitChunksPlugin doesn't seem to bundle any common dependencies between moduleA and moduleB because they're imported dynamically. Any ideas, please?

Answer 1

OK, so I missed a few lines in the documentation - or just misunderstood it. Webpack is smart enough to know whether or not those common dependencies actually need to be split into their own chunk. If the common dependency is over a certain file size then it will be split out, if the file is small enough then Webpack deems it more performant to bundle it into each module. There are also other conditions that this is based on, so take a look at docs if you find yourself in this position.