Bundle analysis and tree shaking in Vue - Mini Project: Build & Apply

Bundle Analysis and Tree Shaking in Vue

📖 Scenario: You are building a Vue app that uses several components. You want to see which parts of your code are included in the final bundle and remove unused code to make your app faster.

🎯 Goal: Learn how to set up bundle analysis and apply tree shaking in a Vue project to optimize the final bundle size.

📋 What You'll Learn

Create a Vue app with multiple components

Add a configuration variable to enable bundle analysis

Use tree shaking by importing only needed components

Complete the Vue app with bundle analyzer plugin setup

💡 Why This Matters

🌍 Real World

Bundle analysis helps developers see what code is included in their app's final bundle. Tree shaking removes unused code, making apps faster and smaller.

💼 Career

Understanding bundle analysis and tree shaking is important for frontend developers to optimize app performance and load times.

1

Create Vue components for the app

Create three Vue components named Header.vue, Footer.vue, and MainContent.vue each exporting a simple template with a <template> tag and a root <div> containing text: 'Header Section', 'Footer Section', and 'Main Content Section' respectively.

Vue

# Create Header.vue, Footer.vue, and MainContent.vue components with simple templates
# Your code here

Hint

Each component should have a <template> with a <div> containing the exact text.

2

Add a configuration variable to enable bundle analysis

In your vite.config.js file, create a constant named enableBundleAnalysis and set it to true to enable bundle analysis.

Vue

  Header Section



// No script needed




  Footer Section



// No script needed




  Main Content Section



// No script needed


// In vite.config.js
const enableBundleAnalysis = true
# Your code here

Hint

Just create a constant named enableBundleAnalysis and set it to true.

3

Import only needed components to apply tree shaking

In your main Vue app file App.vue, import only Header.vue and MainContent.vue components using import Header from './Header.vue' and import MainContent from './MainContent.vue'. Use these components in the template and do not import Footer.vue.

Vue

  



// Import Header and MainContent components only
# Your code here

Hint

Import only the two components you want to use and include them in the template.

4

Complete vite.config.js with bundle analyzer plugin

In vite.config.js, import visualizer from 'rollup-plugin-visualizer'. Then export the config using defineConfig from 'vite'. Inside the config, add plugins array that includes visualizer() only if enableBundleAnalysis is true.

Vue

// In vite.config.js
import { defineConfig } from 'vite'
// Import visualizer plugin
# Your code here

const enableBundleAnalysis = true

export default defineConfig({
  plugins: [
    // Add visualizer plugin only if enableBundleAnalysis is true
  ]
})

Hint

Use the spread operator to conditionally add the visualizer plugin to the plugins array.

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