Webpack 4 Split Chunks Terms

Question

I understand the great work that was done on webpack 4. Specially on rewriting the code splitting plugin. However, and since it's still kinda new, I don't find good documentation on the new SplitChunksPlugin.

I struggle on the meaning of the terms chosen. For example:

chunks: there are 3 possible values "initial", "async" and "all". What does it mean? Initial chunks are the entries? Async the dynamic imported? all is the initial + async? If I use initial then my dynamic imported chunks won't leverage the code splitting? Eg. main.tsx dynamically imports about.tsx which does a normal import of lodash. Lodash wouldn't be extracted to the vendors bundle?

enforce: I see a lot of configs setting the enforce:true, what does it mean?

For a better context I'm posting an example of splitChunks configs.

optimization: {
    splitChunks: {
      cacheGroups: {
        'commons': {
          minChunks: 2,
          chunks: 'all',
          name: 'commons',
          priority: 10,
          enforce: true,
        },
      },
    },
  },

Answer 1

Indeed, while actually there is some official documentation: https://webpack.js.org/plugins/split-chunks-plugin/

The following article might be more useful: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

I particularly find the following very enlightening:

The new chunk graph introduces a new object: the ChunkGroup. A ChunkGroup contains a Chunks.

At an entrypoint or an async splitpoint a single ChunkGroup is referenced, which means all containted Chunks in parallel. A Chunk can be referenced in multiple ChunkGroups.

There are no longer parent-child relationships between Chunk, instead this relationship now exists between ChunkGroups.

Now “splitting” of Chunks can be expressed. The new Chunk is added to all ChunkGroups, which contain the origin Chunk. This doesn’t affect parent relationships negatively.