Vue-cli: tree-shaking not work

[PanJiaChen]

Version

3.7.0

Reproduction link

demo: https://github.com/PanJiaChen/tree-shaking-test

Step

npm install

npm run build

You can view the generated js file in the /dist folder. Found that tree-shaking did not work.

I only import the banana function in About.vue, but orange was also packaged.

Step2

Now find router.js, comment About2

{
  path: '/about2',
  name: 'about2',
  component: () => import('./views/About2.vue'),
}

Execute `npm run build again

Found that tree-shaking has taken effect again.

Conclusion

Found that when a file is referenced by multiple pages, tree-shaking will not work. But at the same time you can find that the tree-shaking of foo and bar in fruit.js has been in effect.

[sodatea]

https://github.com/webpack/webpack/issues/7500

This is the _expected_ behavior. Tree shaking is not supported on async chunks.