Tree-shaking is a technology that optimizes JavaScript applications by removing unused code. 1. It relies on the static structure of the ES6 module, analyzes and excludes unreferenced functions, variables or components during construction; 2. Vite uses Rollup for production construction, automatically performs tree-shaking, while Vue CLI implements similar functions based on webpack; 3. To maximize the effect, ES modules should be used, avoids side effects, splits large files, only requires modules, and uses third-party libraries with caution. This technology significantly reduces package size and improves application performance.

Tree-shaking is a technique used by modern JavaScript build tools to eliminate dead code — that is, code that isn't actually used in your application — from the final bundled output. This helps reduce the overall size of your app, making it faster to load and more efficient.

Build tools like Vite and Vue CLI use tree-shaking under the hood (often via Rollup or webpack) to optimize Vue applications during the build process.

What Exactly Happens During Tree-Shaking?

Tree-shaking works best with ES6 modules ( import / export ) because they are statically analyzed — meaning the imports and exports can be determined at build time without running the code.

Here's how it works:

• Unused functions, variables, or components are identified.
• Only the code that is actually referenced somewhere in your app gets included in the final bundle.
• Code that's never called or imported gets "shaken out" — hence the name.

For example, if you import only one function from a utility file but not the others, tree-shaking will make sure only that function ends up in the final bundle.

 // utils.js
export const add = (a, b) => ab;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './utils.js';
console.log(add(2, 3));

In this case, subtract() won't be included in the final output if tree-shaking is enabled.

How Do Tools Like Vite and Vue CLI Use Tree-Shaking?

Vite and Vue CLI both support tree-shaking out of the box, though they do it a bit differently:

Vite

Vite uses Rollup for production builds, which has excellent built-in support for tree-shaking. It analyzes your module graph and removes any unused exports.

• During development, Vite uses native ES modules, so no bundling or tree-shaking happens there — it's fast and lightweight.
• On build ( vite build ), Rollup kicks in and optimizes everything, including removing unused code.

Vue CLI

Vue CLI is based on webpack, which also supports tree-shaking, though it's a bit more complex due to webpack's broader feature set.

• Webpack identifies unused exports using its own static analysis system.
• You need to make sure your dependencies are written with ES modules for tree-shaking to work properly.
• Vue CLI also uses a technique called “scope hoisting” to further optimize code.

Both tools require you to write modular code using import / export for tree-shaking to work effectively.

Tips to Make the Most of Tree-Shaking

To get better results from tree-shaking in your Vue apps, follow these practical tips:

• ? Always use ES6 modules ( import / export )
• ? Avoid side effects in your modules when possible
• ?? Split large files into smaller, reusable modules
• ? Don't import entire libraries if you only need one part of them
• ? Use tools like Webpack Bundle Analyzer to inspect what's being included

Also, be careful with third-party libraries. Some older ones may not be optimized for tree-shaking, especially if they're using CommonJS syntax ( require() ). In those cases, the whole library might end up in your bundle even if you only use a small part of it.

Final Thoughts

Tree-shaking is a powerful optimization that helps keep Vue apps lean by removing unused code. Both Vite and Vue CLI take advantage of this through Rollup and webpack respectively. The key to getting the most out of it lies in writing clean, modular code and understanding how your build tool processes it.

It's not magic, but when done right, it makes a real difference in performance — especially for large-scale apps.

Basically that's it.

The above is the detailed content of What is tree-shaking, and how do build tools like Vite or Vue CLI leverage it for Vue applications?. For more information, please follow other related articles on the PHP Chinese website!