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.