Library output is not tree-shakeable

[luckylooke]

I have just tested tree shaking and it seems to be not working.

Reproduction:

1. init fresh library

npx vue-sfc-rollup sfc-init

2. create duplicate of sample component.. called example
3. build

npm run build

4. In Vue app project

import { WsUikitSample } from 'your-lib';
...
components: {
    WsUikitSample,
  },
...

5. build app for production
6. WsUikitExample is present in bundle :/

I thought it will be fixed by removing all from entry.ts but following line

export * from '@/lib-components/index';

it did not help
I am still getting Example component implementation into app bundle, even the app does not use it. :/

I did upload example library https://github.com/luckylooke/vue-sfc-rollup-tree-shake
I did not upload app as i ti standard Vue app generated by Vue CLI
So I did not publish full reproduction... I can do it later, but I need to know first whether there wont be answer like: "Tree shake is not supported", so I spare some energy to reproduce it online..
thanks for understanding

And also thanks for sharing this repo.. so far the best I have found but still missing this tree shake feature.

Happy coding 🙂 👍

[mgdodge]

Seems this is something which I can partially address, but not completely. There is an auto-install that happens as part of the output for use via script tag, and this should not be in the ESM output, so I can adjust the build to omit this from the esm build.

But in addition, there seems to be some output from rollup-plugin-vue which is not flagging things properly for webpack. See this issue for an explanation.

I will look into making the esm build changes that I can, but this might not be resolved until rollup-plugin-vue gets updated as well.

[luckylooke]

Thank you 🙏 for your further investigation, nice results, it would be awsome to have tree-shakeable vue component library ona day. For now I put library as git submodule into the projects so they directly access library source *.vue files and it works. But having it as npm module one day will make me feel to have it more standard.

[mgdodge]

If you notice, the individual .vue files are actually published to npm as part of the library, so you don't have to do the subrepo idea. Your import paths would be like 'import foo from "npmmodule/src/lib-components/foo.vue";' The decision to include the raw .vue files was made because there are times when it's beneficial to have them. In those cases, npm is just the delivery mechanism, and the transpile stuff is ignored.

[mgdodge]

This issue is not completely resolved - still pending update in rollup-plugin-vue. If that doesn't seem likely, it's possible to fix here with a custom rollup plugin, but very hacky IMHO.

[mgdodge]

Just tested with latest release of rollup-plugin-vue (5.1.7) and it seems to work great now!