Bundle analysis and tree shaking in Vue - Step-by-Step Execution

Concept Flow - Bundle analysis and tree shaking

Start Build Process

↓

Analyze Bundle Contents

↓

Identify Unused Code

↓

Remove Dead Code (Tree Shaking)

↓

Generate Optimized Bundle

↓

Deploy or Serve Bundle

This flow shows how the build process analyzes the code bundle, removes unused parts, and creates a smaller optimized bundle.

Execution Sample

Vue

import { ref } from 'vue';
import { unusedFunc } from './utils';

const count = ref(0);

export default {
  setup() { return { count }; }
};

This Vue component imports a function that is never used, which can be removed by tree shaking during bundle analysis.

Execution Table

Step	Action	Code Analyzed	Result	Bundle Size Impact
1	Start build	All project files	Bundle created with all code	Full size
2	Analyze imports	import { ref } from 'vue'; import { unusedFunc } from './utils';	Detect unusedFunc is not used	No size change yet
3	Mark unused code	unusedFunc	Marked as dead code	Potential size reduction
4	Remove dead code	unusedFunc code	Removed from bundle	Bundle size reduced
5	Generate final bundle	Remaining code	Optimized bundle created	Smaller size
6	Deploy bundle	Optimized bundle	Bundle served to users	Faster load times

💡 Build completes with unused code removed, resulting in a smaller bundle.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
bundleSize	Full size	Full size	Reduced size	Reduced size
unusedFunc	Included	Detected unused	Removed	Removed

Key Moments - 2 Insights

Why is unusedFunc removed even though it is imported?

Because the build process detects unusedFunc is never called or referenced in the code (see execution_table step 2 and 3), so it safely removes it to reduce bundle size.

Does tree shaking remove code used dynamically or via strings?

No, tree shaking only removes code that static analysis shows is unused. Code accessed dynamically or via strings may not be detected and thus stays in the bundle.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is unusedFunc marked as dead code?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Result' column for when unusedFunc is marked as dead code.

According to variable_tracker, what happens to bundleSize after step 4?

A It stays full size

B It increases

C It reduces

D It becomes zero

💡 Hint

Look at the bundleSize row and the value after Step 4.

If unusedFunc was used in the code, how would the execution_table change?

A Bundle size would increase at Step 5

B Step 3 would mark unusedFunc as used, not dead code

C Step 4 would remove unusedFunc anyway

D Build would fail

💡 Hint

Consider what happens if code is actually used during analysis (see Step 3).

Concept Snapshot

Bundle analysis scans your code to find what parts are used.
Tree shaking removes unused code to make bundles smaller.
Unused imports or functions not called get removed.
Smaller bundles load faster and improve app performance.
Dynamic code may not be removed automatically.
Use bundle analyzers to visualize what stays or goes.

Full Transcript

Bundle analysis and tree shaking help optimize Vue apps by removing unused code. The build process starts by analyzing all project files and imports. It detects which parts, like unused functions, are never used. These are marked as dead code and removed from the final bundle. This reduces the bundle size, making the app load faster. Variables like bundleSize shrink after dead code removal. Beginners often wonder why imported but unused code is removed; it's because static analysis shows it is never called. However, code used dynamically may not be removed. Visual quizzes help reinforce when code is marked unused and how bundle size changes. The quick snapshot summarizes the key points for easy recall.

Practice

1. What is the main purpose of tree shaking in a Vue project?

easy

A. To change the app's user interface

B. To remove unused code from the final bundle

C. To increase the size of the app bundle

D. To add more features automatically

Solution

1. Step 1: Understand tree shaking concept

   Tree shaking is a process that removes code not used in the app to reduce bundle size.

2. Step 2: Identify its effect on Vue projects

   In Vue, tree shaking helps make the app faster by removing unused components or functions.

3. Final Answer:

   To remove unused code from the final bundle -> Option B

4. Quick Check:

   Tree shaking = remove unused code [OK]

Hint: Tree shaking cuts unused code to shrink bundles [OK]

Common Mistakes:

• Thinking tree shaking adds features
• Believing it increases bundle size
• Confusing it with UI changes

2. Which of the following is the correct way to enable bundle analysis in a Vue CLI project?

easy

A. Add analyze: true in vue.config.js

B. Use npm run serve --analyze

C. Run vue-cli-service build --report

D. Set treeShake: false in package.json

Solution

1. Step 1: Recall Vue CLI bundle analysis command

   The Vue CLI supports bundle analysis with the --report flag during build.

2. Step 2: Check other options for correctness

   Options A, C, and D are incorrect or invalid ways to enable bundle analysis.

3. Final Answer:

   Run vue-cli-service build --report -> Option C

4. Quick Check:

   Bundle analysis command = build --report [OK]

Hint: Use --report flag with build for analysis [OK]

Common Mistakes:

• Adding unsupported config keys
• Using serve instead of build
• Disabling tree shaking by mistake

3. Given this Vue component import code, what will tree shaking do during production build?

import { ref, reactive, unusedFunc } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ name: 'Vue' });
    return { count, state };
  }
}

medium

A. All imports including unusedFunc are included in the bundle

B. Only unusedFunc is included, others removed

C. Tree shaking does not affect imports

D. unusedFunc is removed from the final bundle

Solution

1. Step 1: Identify used and unused imports

   The code uses ref and reactive, but unusedFunc is never used.

2. Step 2: Understand tree shaking effect

   Tree shaking removes unused imports like unusedFunc to reduce bundle size.

3. Final Answer:

   unusedFunc is removed from the final bundle -> Option D

4. Quick Check:

   Unused imports removed by tree shaking [OK]

Hint: Unused imports get removed in production build [OK]

Common Mistakes:

• Assuming all imports stay in bundle
• Thinking tree shaking removes used code
• Believing tree shaking is manual

4. You notice your Vue app bundle is larger than expected. Which of these is a likely cause related to tree shaking?

medium

A. You imported entire libraries instead of specific functions

B. You enabled production mode in build

C. You removed unused imports manually

D. You used ref and reactive properly

Solution

1. Step 1: Analyze import style impact on bundle size

   Importing whole libraries (like import * as lodash from 'lodash') prevents tree shaking from removing unused parts.

2. Step 2: Check other options for relevance

   Options B, C, and D either reduce bundle size or are unrelated to bundle size increase.

3. Final Answer:

   You imported entire libraries instead of specific functions -> Option A

4. Quick Check:

   Whole library imports block tree shaking [OK]

Hint: Import only needed parts to enable tree shaking [OK]

Common Mistakes:

• Thinking production mode increases bundle
• Believing manual removal is needed
• Ignoring import style effects

5. You want to reduce your Vue app's bundle size by removing unused components and libraries. Which combination of steps is best?

hard

A. Use dynamic imports for components and enable production build with bundle analysis

B. Import all components globally and disable production optimizations

C. Manually delete unused files without build tools

D. Use development build and avoid code splitting

Solution

1. Step 1: Use dynamic imports to load components only when needed

   This helps tree shaking and code splitting to reduce initial bundle size.

2. Step 2: Enable production build with bundle analysis

   This activates tree shaking and lets you see what code is included to optimize further.

3. Final Answer:

   Use dynamic imports for components and enable production build with bundle analysis -> Option A

4. Quick Check:

   Dynamic imports + production build = smaller bundles [OK]

Hint: Combine dynamic imports and production build for best results [OK]

Common Mistakes:

• Importing all components globally
• Disabling production optimizations
• Relying on manual file deletion