Vue-cli: module.id is incremented when add a new page

[PanJiaChen]

Version

3.0.0-rc.5

Reproduction link

https://github.com/PanJiaChen/chunk-test

Steps to reproduce

1. npm install
2. add a new router (Don't add at the end)
3. npm run build
4. diff generated files

What is expected?

I only added one file, so the final result should not change other pages.xxx.js.

What is actually happening?

About.vue js file id has been changed. Caused the file moduleId behind it to change.

Every time I add a new page, it may cause the cache of other pages to become invalid.

[PanJiaChen]

webpack records can solved this.

[LinusBorg]

Note to docs: as reference for PR: https://webpack.js.org/configuration/other-options/#recordspath

The question is, where do we put this? It feels like something we should keep abstracted away, but the webpack docs recommend adding it to version control, which means the user has to be aware of it.

[yyx990803]

The records file is only used for human inspection and not used during runtime... I don't think there really is a way to fix this in webpack at the moment, maybe you should open an issue for webpack instead.

[PanJiaChen]

webpack 4.0 to 4.16: Did you know?

Maybe webpack5 will fix it. :dizzy_face:

[PanJiaChen]

Before the official release of webpack5, I found that NamedChunksPlugin can be used to solve this problem.

new webpack.NamedChunksPlugin(chunk => {
  if (chunk.name) {
    return chunk.name
  }
  return Array.from(chunk.modulesIterable, m => m.id).join('_')
})

[yyx990803]

@PanJiaChen good find!