Requirements for Treeshaking #
This page for contributors describes the basic rules and restrictions that need to be taken into account when developing for correct work Treeshaking.
How TreeShaking works #
We made several build formats:
- esm - used for tree-shaking
- esm-ssr - also used for tree-shaking, but uses
@vue/server-side-renderer. - iife - used by browsers, can be included to page without bundler.
- cjs - used for bundlers that use CommonJS (e.g. node) format instead of ESM
- styles - SCSS utils, that is not required for components.
We use Webpack for local development and rollup for build, so we have a special package to test this two things - bundlers-tests
Requirements and rules #
We need to use ES module (esm format) and Named Exports (export { something } instead of export default something). Export default breaks tree shaking for imported file. It will fully loaded by bundler.
TreeShaking works only with node modules, that is written in esm format. For example, we use lodash-es instead of lodash. That way we compile only functional we need instead of full library.
Before release check dist with bundlers-tests. We need to check build with Webpack, Vite (Rollup) because vuestic-ui can work different for this two.