QUESTION: route based package chunking

[ahmetkuslular]

hi,

The project is great, and I want to thank you first.

I'm working on a performance-focused project, and I want to chunk and separate route-based packages.

vendor: {
          test: /[\\/]node_modules[\\/]/,
          enforce: true,
          chunks: 'all',
          name(module: any) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            switch (packageName) {
              case 'react':
              case 'react-dom':
              case 'scheduler':
              case 'object-assign':
                return 'react';
              case 'path-to-regexp':
              case 'uuid':
                return 'rarely';
              default:
                return 'vendor';
            }
          },
        },

I want to separate them like the structure here, such as homeVendor, usersVendor, etc., and load only that vendor on the relevant page. Separating them is not a problem, but how can I decide which vendor to load on which route? Is it possible to do something like this?

[artem-malko]

Hi)

You have to understand, that there is no way back if you'll start to work with code splitting in a such way) I mean such manual control.

how can I decide which vendor to load on which route

In my opinion, it's better to delegate this job to webpack or something. Cause it's highly possible, that you can break something or forget to load something important in such manual way.

In that project there is a webpack plugin: https://github.com/artem-malko/react-ssr-template/blob/main/webpack/plugins/dependencyManager/plugin.ts But this plugin can help you to have control over dynamic imports only. And it has some bugs) I'll try to fix it asap) But who knows, may be you will find something useful from it)

By the way, you said, that

Separating them is not a problem

How did you do that?)

[artem-malko]

@ahmetkuslular my plugin is ok, no bugs) I've fixed it already =)