Bundle analysis and tree shaking in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue component for lazy loading.

Vue

const MyComponent = () => import('[1]');

Drag options to blanks, or click blank then click option'

A'./MyComponent.vue'

B'MyComponent.vue'

C'./MyComponent.js'

D'MyComponent.js'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the './' in the path

Using wrong file extension

Lazy loading a Vue component requires the relative path with extension, like './MyComponent.vue'.

2fill in blank

medium

Complete the code to analyze the bundle size using webpack-bundle-analyzer.

Vue

const BundleAnalyzerPlugin = require('[1]').BundleAnalyzerPlugin;

Drag options to blanks, or click blank then click option'

A'webpack-bundle-analyzer'

B'vue-bundle-analyzer'

C'bundle-analyzer-webpack'

D'analyzer-webpack-bundle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect package names

Misspelling the package

The correct package name is 'webpack-bundle-analyzer' to import the plugin.

3fill in blank

hard

Fix the error in the Vue component import to enable tree shaking.

Vue

import [1] from 'vue';

Drag options to blanks, or click blank then click option'

AVue

B{ createApp }

C* as Vue

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the entire Vue object

Using default import when named import is needed

Using named imports like { createApp } allows tree shaking to remove unused code.

4fill in blank

hard

Fill both blanks to configure webpack to use the bundle analyzer plugin.

Vue

plugins: [new [1]()],
module.exports = [2];

Drag options to blanks, or click blank then click option'

ABundleAnalyzerPlugin

Bconfig

CwebpackConfig

DAnalyzerPlugin

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong plugin class name

Wrong export object name

The plugin is named BundleAnalyzerPlugin and the exported config object is usually named config.

5fill in blank

hard

Fill all three blanks to create a tree-shakable Vue component import with dynamic chunk name.

Vue

const LazyComp = () => import(/* webpackChunkName: '[1]' */ '[2]').then(m => m.[3]);

Drag options to blanks, or click blank then click option'

AMyChunk

B./components/MyComponent.vue

Cdefault

DMyComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Wrong chunk name format

Incorrect import path

Accessing wrong export property

The chunk name is 'MyChunk', the path is './components/MyComponent.vue', and the default export is accessed with 'default'.