Bundle analysis and tree shaking in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of tree shaking in Vue projects?

Tree shaking helps optimize Vue applications by:

A Adding extra debugging information to the bundle

B Automatically updating Vue components when data changes

C Removing unused code from the final bundle to reduce size

D Improving CSS styling by removing unused styles

💡 Hint

Think about how to make your app load faster by cutting down code.

Tree shaking removes code that is not used anywhere in your app, making the bundle smaller and faster to load.

❓ component_behavior

intermediate

What will the bundle size be if you import only one function from a large utility library in Vue?

Consider you import only the debounce function from a large utility library in your Vue component. How does tree shaking affect the bundle size?

A The bundle includes only the <code>debounce</code> function and its dependencies

B The entire utility library is included in the bundle

C No code from the utility library is included

D The bundle size doubles because of the import

💡 Hint

Tree shaking removes unused parts of libraries.

Tree shaking keeps only the imported parts and removes unused code, so only debounce and what it needs are included.

🔧 Debug

advanced

Why does your Vue bundle include unused components despite tree shaking?

You notice your Vue app bundle is large and includes components you never use. Which of these is the most likely cause?

A You used <code>v-if</code> to conditionally render components

B You used dynamic imports with <code>defineAsyncComponent</code>

C You only imported components inside <code>setup()</code> function

D You imported components using a wildcard import like <code>import * as components from './components'</code>

💡 Hint

Think about how imports affect what code is included.

Wildcard imports bring in all exports, so tree shaking cannot remove unused components.

📝 Syntax

advanced

Which import style enables tree shaking in Vue projects?

Select the import statement that allows tree shaking to remove unused code:

A import { ref, reactive } from 'vue'

B import * as Vue from 'vue'

C const Vue = require('vue')

D import Vue from 'vue'

💡 Hint

Tree shaking works best with named imports.

Named imports let bundlers identify exactly what is used and remove unused parts.

❓ state_output

expert

What does the bundle analyzer show after enabling tree shaking in a Vue app?

After enabling tree shaking and analyzing your Vue app bundle, what change will you see in the bundle analyzer report?

A More modules included due to added dependencies

B Smaller bundle size with fewer unused modules visible

C No change in bundle size or modules

D Bundle size increases because of added source maps

💡 Hint

Tree shaking removes unused code, so the bundle should shrink.

The bundle analyzer will show a smaller bundle with fewer unused modules after tree shaking is enabled.