Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
Angular

Measuring Angular Performance with Source Map Explorer

Cory Rylan

- 2 minutes

This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

Web Performance is becoming more and more demanding as Web applications
continue to grow in size and complexity. One of the biggest culprits of Web Performance issues is JavaScript. JavaScript can be slow to download but also slow to execute depending on the network and device capabilities.

To keep Angular performance fast we can use lazy loading and dynamic imports to load code as needed on demand. This can greatly reduce the amount of JavaScript required to load and run on the client. However, even when following best practices, sometimes a single third party dependency can break all performance progress.

In this post, we will see how we can better understand what JavaScript we are sending down to the client within our Angular applications.

Angular CLI

To understand our Angular application's performance characteristics, we will need to build our app with the production flag to ensure we are testing with what our prod environment will be using.

In the root of the Angular CLI project, we can execute the following:

ng build --prod --source-map

This command will build our Angular application with all the optimization the Angular CLI uses and produce source map files of the output code. The source maps allow the compiled final output to be mapped to its original code before compilation.

With the source maps, we can use a tool like source-map-explorer to inspect and show precisely what code is being sent to the client. To use Source Map Explorer, you will need to install via NPM.

npm install source-map-explorer

Once installed, we can add it as an NPM stript to the package.json in our Angular application.

{
"bundle:report": "source-map-explorer dist/demo-app/**/*.js"
}

When we run our script npm run bundle:report, we will get the output in the browser.

Measure Angular Performance with Source Map Explorer

Here we can see the output of the ng-pokedex project. We can see all the JavaScript and dependencies within each JavaScript bundle. This visualization makes it easy to identify what code is being loaded.

While the Angular CLI uses Webpack for some of its bundling, it also makes additional optimizations on top of Webpack. Because of these optimizations, it's important to use the source-map-explorer to test the final output and not the webpack-bundle-analyzer that is commonly used with Webpack based applications.

You can find the demo application on Github in the link below!

View Demo Code on Github   
Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Angular

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article