Tree-Shaking and Auto-Import
Named exports for tree-shaking, unplugin-vue-components integration, resolver config.
Tree-Shaking and Auto-Import is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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";Avoid a Default Barrel Object
Exporting one object with all components forces bundlers to keep them all, even if the app uses one.
// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };Consumer Imports What They Need
With named exports, the consumer destructures only used components and the rest is dropped from their build.
import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundledThe sideEffects Field
Bundlers assume modules may have side effects and keep them. Setting "sideEffects": false in package.json tells them your modules are pure and safe to prune.
{
"sideEffects": false
}Declaring CSS Side Effects
If your package has CSS imports that must not be dropped, list them so only those are preserved.
{
"sideEffects": ["**/*.css"]
}Auto-Import for Consumers
To save consumers from manual imports, libraries ship a resolver for unplugin-vue-components, which auto-imports components used in templates.
npm install -D unplugin-vue-componentsProviding a Resolver
A resolver is a function that, given a used component name, returns where to import it from. Ship one from your package.
// my-ui-lib/resolver.js
export function MyUiResolver() {
return {
type: "component",
resolve: (name) => {
if (name.startsWith("My")) {
return { name, from: "my-ui-lib" };
}
}
};
}Consumer Config
The consumer registers the plugin with your resolver. Now components used in templates are imported automatically and still tree-shaken.
// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";
export default defineConfig({
plugins: [
vue(),
Components({ resolvers: [MyUiResolver()] })
]
});Auto-Import Plus Tree-Shaking
Because the resolver turns template usage into real named imports, only used components are bundled - you keep both ergonomics and small bundles.
Avoid Global Registration
A library that auto-registers all components via app.use kills tree-shaking. Prefer named exports and an optional resolver so consumers opt in per component.
Quick Check
What package.json setting tells bundlers your modules are safe to tree-shake?
Recap
Enable tree-shaking by using named exports (never a default barrel object) and setting "sideEffects": false (or listing CSS). For ergonomics, ship an unplugin-vue-components resolver so consumers auto-import used components while still bundling only what they use - and avoid forcing global registration.
Frequently asked questions
Is the “Tree-Shaking and Auto-Import” lesson free?
Yes — the full text of “Tree-Shaking and Auto-Import” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “Tree-Shaking and Auto-Import”?
Named exports for tree-shaking, unplugin-vue-components integration, resolver config. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Tree-Shaking and Auto-Import” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.