Bundle analysis and tree shaking in Vue - Performance & Optimization

Performance: Bundle analysis and tree shaking

HIGH IMPACT

This concept affects the page load speed by reducing the JavaScript bundle size and improving initial download and parse time.

Including only necessary Vue components and libraries in the bundle

Vue

import { VBtn, VCard } from 'vuetify/components';
export default {
  components: { VBtn, VCard }
};

Imports only used components, enabling tree shaking to remove unused code.

📈 Performance Gainsaves 250kb+ in bundle size, reduces blocking time by 100ms

Including only necessary Vue components and libraries in the bundle

Vue

import * as Vuetify from 'vuetify';
export default {
  components: { ...Vuetify }
};

Imports the entire Vuetify library, including unused components, increasing bundle size.

📉 Performance Costadds 300kb+ to bundle, blocks rendering for 150ms on slow networks

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Import full library	N/A	N/A	High due to large JS execution	[X] Bad
Import only used components	N/A	N/A	Low due to smaller JS execution	[OK] Good

Rendering Pipeline

Bundle analysis and tree shaking reduce the amount of JavaScript the browser must download, parse, and execute before rendering the page.

→Network

→Parse & Compile

→Script Execution

→Style Calculation

→Layout

⚠️ BottleneckParse & Compile stage is most expensive due to large bundles

Core Web Vital Affected

LCP

This concept affects the page load speed by reducing the JavaScript bundle size and improving initial download and parse time.

Optimization Tips

1Always import only the components you use to enable tree shaking.

2Use bundle analysis tools to identify large dependencies.

3Apply code splitting to load code on demand and reduce initial bundle size.

Performance Quiz - 3 Questions

What is the main benefit of tree shaking in a Vue project?

A Removes unused code to reduce bundle size

B Improves CSS styling performance

C Automatically caches API responses

D Increases the number of components loaded

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, filter by JS files to see bundle sizes; then use Performance tab to record page load and check scripting time.

What to look for: Look for large JS files blocking the main thread and long scripting times indicating heavy parsing and execution.

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