Docs about tree-shaking for contributors

[m0ksem]

Write about things that developers should worry about while working on the project. (While I remember all this 😁)

[olivierceulemans]

I'm not a contributor (yet) but I'm really impatient to find out how you managed to avoid this really annoying treeshaking bug in vuejs 3. I tried to reproduce what you did in vuestic on my (closed source) project but without success. This is a clear vuejs 3 showstopper for me... to the point of considering a revert to vuejs 2. vuejs/core#2860

[m0ksem]

@olivierceulemans, actually, tree-shaking is a kind of a weird thing for now. We moved from webpack to rollup for building esm packages using rollup-vue-plugin (which is not supported after 2020 and moved to @vitejs/plugin-vue instead). For some reason, vite's esbuild is broken on js_commonjs_loader (huh) so we use rollup instead. A simple solution for tree-shaking is preserveModule option that separates files into js modules.

After a while, I found that our components can not be rendered after vite's build command. I'll make a fix for vite in a few days, but I am sure that there will be more issues again.

I am 100% sure tree-shaking can be provided if you specify all components as inputs for rollup instead preservedModules. I tested with local lib and it works fine.

Actualy, you can find that vite is not capable with preservedModules and usually you need to use manualChunks instead.