Tree shaking in a Vue build is a process that removes unused code from your final bundle during the build phase. It's a key optimization technique that helps reduce the size of your application by only including the parts of your code (and dependencies) that are actually used.

This works because modern JavaScript bundlers like Vite (which uses esbuild under the hood) or Webpack can statically analyze your code structure and determine what’s being imported and used. If a function, component, or module is never used, it gets “shaken” out of the final output.

How Tree Shaking Works in Vue Projects

Vue apps are usually structured with components, utilities, and libraries imported across different files. Tree shaking works best with ES Modules (ESM) because they are static by nature — meaning imports and exports are defined at build time, not runtime.

Here’s a simple example:

// utils.js
export function usedFunction() {
  return 'Hello';
}

export function unusedFunction() {
  return 'Not called';
}

If you only import usedFunction in your Vue component:

import { usedFunction } from './utils.js'

Then unusedFunction will likely be removed from the final bundle if your build tool supports tree shaking.

When Tree Shaking Doesn't Work as Expected

Tree shaking isn’t magic — it has limitations. Here are a few situations where it might not work as you hope:

• Side effects in modules: If a module has side effects (like modifying global variables or calling functions when imported), the bundler might keep the whole file to avoid breaking functionality.
• Importing CSS or assets: Tree shaking only works on JavaScript/TypeScript code — it doesn’t remove unused styles or assets unless you use additional tools.
• Third-party libraries not built with ESM in mind: Some older or improperly structured libraries may bundle everything together, making it hard to shake out unused parts.

You can help the bundler by marking modules as side-effect-free in your package.json:

{
  "sideEffects": false
}

Or specify which files have side effects:

{
  "sideEffects": ["./src/some-global-styles.css"]
}

Tips for Better Tree Shaking in Vue

To make the most of tree shaking, follow these practical tips:

• Use named exports carefully — if you import a module with many named exports but only use one, the bundler can still shake out the rest (assuming no side effects).
• Avoid wildcard imports like import * as utils from './utils' — this often prevents tree shaking because the bundler can’t determine which exports are actually used.
• Prefer tree-shakable libraries — many modern libraries (like Lodash with lodash-es) offer ESM versions that are optimized for tree shaking.
• Keep utility files small and focused — instead of one giant utility file, split logic into smaller modules so unused parts can be removed more effectively.

Final Thoughts

Tree shaking is a powerful feature in Vue builds that helps keep your app lightweight by removing dead code. It works best when your code and dependencies are structured with ESM and minimal side effects. While it’s not a silver bullet, understanding how it works and writing code that supports it can make a noticeable difference in your app’s performance.

And that’s basically it.

The above is the detailed content of What is tree shaking in a Vue build?. For more information, please follow other related articles on the PHP Chinese website!