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.

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.