0Pricing
Vue Academy · Lesson

Tree-Shaking and Auto-Import

Named exports for tree-shaking, unplugin-vue-components integration, resolver config.

What is Tree-Shaking

Tree-shaking is dead-code elimination: a bundler drops exports the consumer never imports. A well-built library lets apps include only the components they use, keeping bundles small.

Named Exports Enable It

Use named exports from your entry so each import is statically analyzable. A single default export holding everything (a barrel object) cannot be tree-shaken.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

All lessons in this course

  1. Vite Library Mode Configuration
  2. TypeScript Declarations for Component Libraries
  3. Tree-Shaking and Auto-Import
  4. Publishing to npm and Semantic Versioning
← Back to Vue Academy