Bundle size analysis in Angular - Deep Dive

Overview - Bundle size analysis

What is it?

Bundle size analysis is the process of examining the size of the files that make up an Angular application when it is prepared for the web. It helps developers understand how much code is sent to users and which parts take up the most space. This is important because smaller bundles load faster and improve user experience. The analysis shows which libraries, components, or code parts contribute most to the final size.

Why it matters

Without bundle size analysis, developers might unknowingly send large files to users, causing slow page loads and poor performance, especially on slow networks or devices. This can frustrate users and lead to fewer visits or app usage. By analyzing bundle size, developers can optimize their code, remove unnecessary parts, and deliver faster, smoother apps that keep users happy.

Where it fits

Before learning bundle size analysis, you should understand Angular basics, how Angular builds apps, and what bundles are. After mastering it, you can learn advanced optimization techniques like lazy loading, tree shaking, and code splitting to further improve app performance.

Mental Model

Core Idea

Bundle size analysis reveals what parts of your Angular app make the final download big or small, helping you shrink it for faster loading.

Think of it like...

It's like packing a suitcase for a trip: bundle size analysis is checking what items take up the most space so you can pack lighter and travel faster.

┌───────────────────────────────┐
│ Angular App Build Process      │
├───────────────┬───────────────┤
│ Source Code   │ Dependencies  │
├───────────────┴───────────────┤
│ Bundler (Webpack)             │
├───────────────┬───────────────┤
│ Bundle Files  │ Bundle Size   │
│ (JS, CSS)    │ Analysis Tool │
└───────────────┴───────────────┘

Build-Up - 6 Steps

1

Foundation

What is a Bundle in Angular

Concept: Introduce the idea of a bundle as the combined files sent to the browser.

When you build an Angular app, the code you write and the libraries you use get combined into one or more files called bundles. These bundles include JavaScript, CSS, and other assets needed to run your app in a browser.

Result

You understand that a bundle is the final package your app sends to users.

Knowing what a bundle is helps you realize why its size affects how fast your app loads.

2

Foundation

Why Bundle Size Affects Performance

Concept: Explain how bundle size impacts loading speed and user experience.

Larger bundles take longer to download, parse, and run in the browser. This delay can make your app feel slow or unresponsive, especially on slow internet or devices. Smaller bundles load faster and improve user satisfaction.

Result

You see the direct link between bundle size and app speed.

Understanding this connection motivates you to keep bundles as small as possible.

3

Intermediate

Using Angular CLI to Analyze Bundle Size

🤔Before reading on: do you think Angular CLI can show you bundle sizes automatically or do you need extra tools? Commit to your answer.

Concept: Learn how Angular CLI provides built-in commands to check bundle sizes.

Angular CLI's build command with the --stats-json flag creates a stats file. You can then use tools like 'source-map-explorer' or 'webpack-bundle-analyzer' to visualize which parts of your code make bundles large.

Result

You can generate and view detailed bundle size reports for your app.

Knowing how to generate and read bundle reports is the first step to effective optimization.

4

Intermediate

Interpreting Bundle Analysis Reports

🤔Before reading on: do you think bigger libraries always mean bigger bundles, or can unused code be removed? Commit to your answer.

Concept: Understand how to read reports to find large dependencies and unused code.

Bundle analysis tools show a breakdown of bundle contents by file or library size. They highlight large dependencies and code that might be included but not used (dead code). This helps identify what to optimize or remove.

Result

You can spot which parts of your app or libraries contribute most to bundle size.

Interpreting reports correctly guides you to focus your optimization efforts where they matter most.

5

Advanced

Advanced Techniques: Lazy Loading and Tree Shaking

🤔Before reading on: do you think all code is always included in bundles, or can some be loaded later? Commit to your answer.

Concept: Learn how Angular can load code only when needed and remove unused code automatically.

Lazy loading splits your app so some parts load only when the user needs them, reducing initial bundle size. Tree shaking is a process that removes unused code during build, shrinking bundles further. Both rely on proper code structure and configuration.

Result

Your app loads faster by sending less code upfront and removing dead code.

Mastering these techniques significantly improves app performance and user experience.

6

Expert

Surprising Bundle Size Causes and Fixes

🤔Before reading on: do you think importing a small function from a big library always adds the whole library to your bundle? Commit to your answer.

Concept: Reveal unexpected reasons bundles grow and how to fix them.

Sometimes, importing a small part of a large library can pull in the entire library if not done carefully. Also, using dynamic imports incorrectly or including large assets without optimization can bloat bundles. Experts use techniques like selective imports, asset compression, and custom webpack configs to control size.

Result

You avoid common hidden pitfalls that silently increase bundle size.

Knowing these subtle causes prevents wasted effort and keeps bundles lean in production.

Under the Hood

Angular uses Webpack under the hood to bundle your app. Webpack analyzes your code and dependencies, then combines them into bundles. It also creates source maps to help debug. During this process, tree shaking removes unused code by analyzing import and export statements. Lazy loading splits bundles into chunks loaded on demand. Bundle analysis tools read Webpack's stats to show detailed size info.

Why designed this way?

Webpack and Angular's build system were designed to optimize loading speed and developer experience. Combining files reduces browser requests, while tree shaking and lazy loading reduce the amount of code sent upfront. This balance helps apps load quickly without sacrificing features. Alternatives like sending many small files would slow loading due to many requests.

┌───────────────┐
│ Source Code   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Webpack Build │
│ - Combines    │
│ - Tree Shakes │
│ - Splits      │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Bundles       │
│ - Main Bundle │
│ - Lazy Chunks │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Bundle Report │
│ - Size Info   │
│ - Visual Map  │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: does importing one function from a big library always add the whole library to your bundle? Commit yes or no.

Common Belief: Importing a small part of a library only adds that small part to the bundle.

Reality: Sometimes, due to how libraries are structured, importing one function can pull in the entire library, increasing bundle size unexpectedly.

Why it matters: This can cause bundles to be much larger than expected, slowing down your app without obvious reasons.

Quick: do you think bundle size only matters for slow internet users? Commit yes or no.

Common Belief: Bundle size only affects users with slow internet connections.

Reality: Bundle size affects all users because larger bundles take longer to parse and run, impacting performance even on fast connections and devices.

Why it matters: Ignoring bundle size can degrade user experience universally, not just for some users.

Quick: do you think Angular automatically removes all unused code without any developer action? Commit yes or no.

Common Belief: Angular always removes all unused code automatically during build.

Reality: Angular relies on proper code structure and build configuration; some unused code can remain if imports are not optimized or if libraries are not tree-shakeable.

Why it matters: Assuming automatic removal can lead to bloated bundles and missed optimization opportunities.

Quick: do you think bundle analysis tools slow down your app in production? Commit yes or no.

Common Belief: Bundle analysis tools add overhead and slow down the app when users run it.

Reality: Bundle analysis tools run during development or build time only and do not affect the app's runtime performance for users.

Why it matters: Misunderstanding this may discourage developers from using valuable analysis tools.

Expert Zone

1

Some libraries offer multiple entry points optimized for tree shaking; choosing the right import path can drastically reduce bundle size.

2

Source maps generated during build help debugging but can also reveal bundle structure; managing them carefully is important for security and performance.

3

Custom webpack configurations can fine-tune bundle splitting and optimization beyond Angular CLI defaults, but require deep understanding to avoid breaking builds.

When NOT to use

Bundle size analysis is less useful for very small apps where size is negligible. In such cases, focus on functionality first. Also, for server-side rendered Angular apps, bundle size matters differently, so consider server performance tools instead.

Production Patterns

In production, teams integrate bundle size analysis into CI pipelines to catch size regressions early. They combine it with automated tests and use tools like 'webpack-bundle-analyzer' to create visual reports. Lazy loading is standard for large apps, and selective imports prevent accidental bloat.

Connections

Code Splitting

Bundle size analysis builds on code splitting by showing how splitting affects bundle sizes.

Understanding bundle size helps you see the real impact of splitting code into smaller chunks for faster loading.

Network Performance Optimization

Bundle size directly affects network load times, linking it to broader network optimization strategies.

Knowing bundle size helps optimize not just code but also how data travels over the network, improving overall app speed.

Supply Chain Management

Both involve analyzing and optimizing the size and flow of components to improve efficiency.

Just like reducing shipment size saves costs and time in supply chains, reducing bundle size saves bandwidth and speeds up app delivery.

Common Pitfalls

#1 Ignoring large third-party libraries included by default.

Wrong approach:

import { someFunction } from 'big-library'; // without checking if entire library is included

Correct approach:

import someFunction from 'big-library/specific-path'; // import only needed parts

Root cause:

Not understanding how library structure affects tree shaking and bundle size.

#2 Not generating or using bundle analysis reports.

Wrong approach:

ng build --prod

Correct approach:

ng build --prod --stats-json
npx webpack-bundle-analyzer dist/stats.json

Root cause:

Assuming build output alone shows bundle size details without extra analysis.

#3 Loading all modules eagerly instead of lazy loading.

Wrong approach:

import { HeavyModule } from './heavy.module';
@NgModule({ imports: [HeavyModule] })

Correct approach:

const routes: Routes = [
{ path: 'heavy', loadChildren: () => import('./heavy.module').then(m => m.HeavyModule) }
];

Root cause:

Not using Angular's lazy loading feature to split bundles.

Key Takeaways

Bundle size analysis helps you see what parts of your Angular app make it big or small, guiding optimization.

Smaller bundles load faster, improving user experience on all devices and networks.

Angular CLI and tools like webpack-bundle-analyzer let you generate detailed reports to understand bundle contents.

Techniques like lazy loading and tree shaking reduce bundle size by loading code only when needed and removing unused parts.

Beware of hidden bundle bloat from improper imports or large libraries; careful analysis prevents surprises.

Practice

1. What is the main purpose of bundle size analysis in Angular applications?

easy

A. To change the app's color scheme

B. To add more features to the Angular app

C. To find which parts of the app make the bundle large

D. To increase the app's loading time

Solution

1. Step 1: Understand bundle size analysis goal

   Bundle size analysis helps identify what parts of the app increase the size of the final build.

2. Step 2: Match purpose with options

   Only To find which parts of the app make the bundle large correctly states the purpose as finding large parts in the bundle.

3. Final Answer:

   To find which parts of the app make the bundle large -> Option C

4. Quick Check:

   Bundle size analysis = find large parts [OK]

Hint: Think: Why check bundle size? To find big parts [OK]

Common Mistakes:

• Confusing bundle size analysis with adding features
• Thinking it changes app appearance
• Assuming it slows down the app

2. Which Angular CLI command generates a JSON file useful for bundle size analysis?

easy

A. ng build --stats-json

B. ng serve --stats-json

C. ng test --stats-json

D. ng lint --stats-json

Solution

1. Step 1: Recall Angular CLI commands for building

   The command to build the app and generate stats is ng build --stats-json.

2. Step 2: Identify correct option

   ng build --stats-json matches the correct command to create the JSON file for bundle analysis.

3. Final Answer:

   ng build --stats-json -> Option A

4. Quick Check:

   Build with stats JSON = ng build --stats-json [OK]

Hint: Build command with --stats-json creates analysis file [OK]

Common Mistakes:

• Using ng serve instead of ng build
• Confusing test or lint commands with build
• Forgetting to add --stats-json flag

3. After running ng build --stats-json, you use source-map-explorer on the generated JSON. What will you see?

medium

A. A list of unused CSS styles

B. A list of errors in your Angular code

C. A report of unit test results

D. A visual map showing which files contribute most to bundle size

Solution

1. Step 1: Understand what source-map-explorer does

   This tool shows a visual breakdown of the bundle, highlighting file sizes.

2. Step 2: Match output with options

   A visual map showing which files contribute most to bundle size correctly describes the visual map of file size contributions.

3. Final Answer:

   A visual map showing which files contribute most to bundle size -> Option D

4. Quick Check:

   source-map-explorer output = visual size map [OK]

Hint: source-map-explorer shows visual file size map [OK]

Common Mistakes:

• Thinking it shows code errors
• Confusing with test reports
• Expecting CSS style reports

4. You ran ng build --stats-json but source-map-explorer shows no data. What is the likely cause?

medium

A. You did not generate the stats JSON file during build

B. You forgot to install source-map-explorer globally

C. You ran ng serve instead of ng build

D. Your Angular app has no components

Solution

1. Step 1: Check if stats JSON file was created

   source-map-explorer needs the stats JSON file generated by ng build --stats-json.

2. Step 2: Identify missing stats JSON as cause

   If the file is missing, source-map-explorer shows no data. This matches You did not generate the stats JSON file during build.

3. Final Answer:

   You did not generate the stats JSON file during build -> Option A

4. Quick Check:

   No stats JSON = no data in explorer [OK]

Hint: Check if stats JSON file exists before using explorer [OK]

Common Mistakes:

• Assuming source-map-explorer must be global
• Confusing ng serve with ng build
• Thinking app components affect stats generation

5. You notice your Angular bundle is very large. Which combination of actions will best reduce the bundle size?

hard

A. Disable Ahead-of-Time compilation and enable source maps

B. Use lazy loading for modules and remove unused imports

C. Add more third-party libraries and increase polyfills

D. Increase the number of components and services

Solution

1. Step 1: Identify techniques to reduce bundle size

   Lazy loading loads modules only when needed, and removing unused imports cuts unnecessary code.

2. Step 2: Evaluate options for reducing size

   Use lazy loading for modules and remove unused imports correctly combines these effective methods. Other options add size or disable optimizations.

3. Final Answer:

   Use lazy loading for modules and remove unused imports -> Option B

4. Quick Check:

   Lazy loading + clean imports = smaller bundle [OK]

Hint: Lazy load and clean imports to shrink bundle [OK]

Common Mistakes:

• Adding more libraries increases size
• Disabling AOT slows app and increases size
• Adding components without optimization