Home » Javascript » Webpack 4 Split Chunks Terms

Webpack 4 Split Chunks Terms

Posted by: admin October 29, 2018 Leave a comment

Questions:

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,
        },
      },
    },
  },
Answers: