Vendor based on entry

[romanlex]

I'm trying to set up splitting chunks based on entry point.
I want to get multiple files:

• entryA.js + vendor.entryA.js
• entryB.js + vendor.entryB.js
• entryC.js + vendor.entryC.js
• entryD.js + vendor.entryD.js

For this I use multiple cacheGroups in my webpack config

...Object.keys(entry).reduce((acc, entryName) => {
    acc[entryName] = {
      name: `vendors~${entryName}`,
      chunks: 'initial',
      test: (module, ctx) => {
        if (module.constructor.name === 'CssModule') return false
        if (!/[\\/]node_modules[\\/]/.test(module.resource)) return false

        return recursiveIssuer(module, ctx) === entryName
      },
    }

    return acc
  }, {}),

with recursiveIssuer

const recursiveIssuer = (mod, ctx) => {
  const issuer = ctx.chunkGraph.moduleGraph.getIssuer(mod)

  if (issuer) {
    return recursiveIssuer(issuer, ctx)
  }
  const chunks = ctx.chunkGraph.getModuleChunksIterable(mod)

  for (const chunk of chunks) {
    return chunk.name
  }

  return false
}

It doesn't work properly because:

• I have changed [contenthash]each build or project for many files
• now entryB randomly can use vendor.entryA.js and vendor.entryD.js
  

"webpack": "5.74.0"
I don't known maybe it's a bug.

[alexander-akait]

First, I strongly don't recommend doing this. You really lose a lot of optimizations and do very bad things for your users, if you really want to development different scopes in your projects, please consider https://webpack.js.org/concepts/module-federation/

I have changed [contenthash]each build or project for many files

What do you mean?

Look at chunks: 'initial', I think you need to use 'all' here, because you can have dynamic chunks.

There are more options here when webpack consider there place modules https://webpack.js.org/plugins/split-chunks-plugin/, look at minChunks and reuseExistingChunk

[romanlex]

What do you mean by lose a lot of optimizations
For example my initial chunk (entry point) have a different imports with node_modules. I have several options:

• default
• create global common vendor chunk for all entry points
• another custom cacheGroups for vendors

Why when I have to load entry point A do I need to load common vendors for all entry points?

Example:

• go to page A
• I want to load vendors for page A
• I want to load entry for page A
• another node_modules can be load asynchronously by async chunk

Example with bundle analyzer:
Default(without cacheGroups) - it's very bad splitting for big projects

Vendor common - better but not ideal

vendorCommon: {
  chunks: 'initial',
  priority: 40,
  enforce: true,
  reuseExistingChunk: true,
  test: (module, ctx) => {
    if (!/[\\/]node_modules[\\/]/.test(module.resource)) return false
    const chunks = ctx.chunkGraph.getModuleChunksIterable(module)
    return chunks.size > 1
  },
  name: `vendors~common`,
},

Why in this case gbl entry point must to load vendors from ALL app?
With default size of asset - 460kb(gzip)
With common vendor - 730kb(vendor) + 111kb(entry)

I want:

• build my entry points
• extract vendors for each entry points
• find common vendors from each entrypoints and extract him

[alexander-akait]

What do you mean by lose a lot of optimizations

You can have duplicated modules. Even more you can have ciruclar dependecies, so you need very deterministic algorithm here to avoid contenthash changes a lot. Or you will duplicate modules and increase bundle size

And the same answer for other questions.

[romanlex]

I can check duplicate modules or ciruclar dependecies with statoscope or another tools.
Can you explain where in my example I can get duplicate modules?

[alexander-akait]

Can you explain where in my example I can get duplicate modules?

I need to look at code in this case, but you have reuseExistingChunk, so it should be fine

extract vendors for each entry points

only from node_modules, right?

just use https://github.com/webpack/webpack/blob/main/lib/config/defaults.js#L1205

the same approach you can use for each entry too

find common vendors from each entrypoints and extract him

const chunks = ctx.chunkGraph.getModuleChunksIterable(module)
return chunks.size > 1

this will not work

[broyde]

@romanlex Have you tried to use function as a name for splitChunks.cacheGroups.{cacheGroup}.name?

module.exports = {
  mode: 'production',
  entry: {
    entryA: './src/entryA.js',
    entryB: './src/entryB.js',
    entryC: './src/entryC.js',
    entryD: './src/entryD.js',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(_, chunks) {
            return `vendor.${chunks.map(({name}) => name).join('~')}`;
          },
          enforce: true,
          chunks: 'initial',
        },
      },
    },
  },
};

I've tried this config on simple test project, seems it works as you need:

[romanlex]

Thx for your replay
When I'm trying use name as function I get another behavior of splitting chunk because I think project has ciruclar dependecies(
For example

It is impossible for me because I don't have htmlwebpackplugin with generated chunks in entry file

[i23098]

Hi, did you come up with a solution?

I'm trying to learn webpack, and this seems to me that it should be a very common behaviour, although I think your initial question is missing a vendor.js for common libs for the entire website. i.e.

entryA.js + vendor.entryA.js + vendor.js
entryB.js + vendor.entryB.js + vendor.js
entryC.js + vendor.entryC.js + vendor.js
entryD.js + vendor.entryD.js + vendor.js

• vendor.js would have for instance react+jquery (whatever it's used in all entries or maybe forced - for example, jquery is not used in one of the pages but developer wants to put it into common).
• Each vendor.entryX would have the vendor specific for that page.
• The entryX.js would have the website code that uses the libs.