Force a node_modules dependency to be with its lazy loaded chunk

[jgoux]

Hello all 👋

I'm working on a React app and I'm trying to make optimizations to my frontend build with webpack@5.
The goal is to split heavy node_modules dependencies and only load them when needed using dynamic import() and React.lazy.

Ideally I'd like to have :

• 1 main.bundle.js which will contains the app code without the heavy parts
• 1 vendors.bundle.js which will contains common node_modules deps without the heavy ones
• n dynamically imported bundles which contains heavy node_modules deps

Here is my splitChunks configuration :

splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: false,
        default: false,
        vendor: {
          chunks: "initial",
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          reuseExistingChunk: true,
        },
      },
    },

It kind of work but it's pretty unpredictable, in some cases heavy deps that I expect to have lazy-loaded are still included in my vendors.bundle.js.

For example, I have a component "Chat" which is using the dependency "stream-chat-react". I lazy-loaded this component, a chunk was created but without including the dependency "stream-chat-react" which is stuck in my vendors.bundle.js :

stream-chat-react is only used in my component Chat and its sub-components, so I have no idea why it's not bundled with it.

If you have any idea, I'll be very grateful. 👍

[alexander-akait]

Maybe you can create small example?