Bundle size analysis in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run Angular's production build for bundle size analysis.

Angular

ng build --prod --[1]

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

Astats-json

Bwatch

Cserve

Dlint

Attempts:

3 left

💡 Hint

Common Mistakes

Using --watch instead of --stats-json

Trying to serve instead of build

Running lint instead of build

Using --stats-json generates a stats file for bundle size analysis.

2fill in blank

medium

Complete the command to analyze the generated stats file with webpack-bundle-analyzer.

Angular

webpack-bundle-analyzer [1]

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

Apackage.json

Bsrc/app/app.module.ts

Cangular.json

Ddist/stats.json

Attempts:

3 left

💡 Hint

Common Mistakes

Using source files instead of the stats file

Using config files instead of stats file

The stats JSON file is used as input for the analyzer tool.

3fill in blank

hard

Fix the error in this Angular build command to enable source maps for bundle analysis.

Angular

ng build --prod --source-map=[1]

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

Anone

Btrue

Cfalse

Doff

Attempts:

3 left

💡 Hint

Common Mistakes

Setting source-map to false disables source maps

Using invalid values like 'none' or 'off'

Setting --source-map=true enables source maps for better bundle analysis.

4fill in blank

hard

Fill both blanks to create a custom Angular build configuration for bundle size analysis.

Angular

"configurations": { "[1]": { "optimization": [2] } }

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

Aanalyze

Btrue

Cfalse

Dproduction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'production' as config name for analysis

Setting optimization to true hides bundle details

Custom config named 'analyze' disables optimization to help analyze bundles.

5fill in blank

hard

Fill all three blanks to create a script in package.json for bundle size analysis.

Angular

"scripts": { "[1]": "ng build --configuration=[2] --stats-json && webpack-bundle-analyzer dist/[3]" }

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

Aanalyze

Cstats.json

Dproduction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'production' config instead of 'analyze'

Referencing wrong stats file name

This script runs the build with the 'analyze' config and then opens the stats file with the analyzer.