Tree shaking doesn't work with dynamic import and re-export of .vue components

[saranchonkau]

Version

5.0.8

Reproduction link

github.com

Environment info

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Not Found
    Firefox: 102.0
    Safari: 15.5
  npmPackages:
    @vue/cli-overlay:  5.0.8 
    @vue/cli-plugin-router:  5.0.8 
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-vuex:  5.0.8 
    @vue/cli-service: ~5.0.0 => 5.0.8 
    @vue/cli-shared-utils:  5.0.8 
    @vue/compiler-sfc:  2.7.4 
    @vue/component-compiler-utils:  3.3.0 
    @vue/web-component-wrapper:  1.3.0 
    typescript: ~4.5.5 => 4.5.5 
    vue: ^2.6.14 => 2.7.4 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  17.0.0 (15.10.0)
    vue-style-loader:  4.1.3 
    vue-template-compiler: ^2.6.14 => 2.7.4 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 5.0.8

Steps to reproduce

1. Checkout master branch
2. Run npm run build
3. Check css and js chunks in dist folder

What is expected?

1. Chunk with PageOne contains only its code and TextField code
2. Chunk with PageTwo contains only its code and Form code

What is actually happening?

1. Chunk with PageOne contains code of both TextField and Form
2. Chunk with PageTwo contains code of both TextField and Form

---

Reproduction repository contains 4 branches:

1. master - allows to reproduce original issue
2. direct-import - both pages use direct imports of components, not from index file. And tree shaking works as it should. It proves that the bug is caused by re-export.
3. re-export-of-pure-ts - do the same as master branch, but without any vue related code. It uses dynamic imports and re-export and it works fine. It proves, that re-export of JS functions work as expected
4. re-export-of-ts-in-vue - do the same as master branch, but instead of re-export of vue components (TextField, Form), it re-export simple TS functions. Then these functions are imported in vue components. And tree shaking is still working.

It proves that tree shaking doesn't work exactly when we re-export .vue files