Cory Rylan

My name is . Google Developer Expert, speaker, and Software Developer at VMware Clarity Design System.

Follow @coryrylan

Measuring Angular Performance with Source Map Explorer

Cory Rylan

- 2 minutes

This article has been updated to the latest version Angular 12 and tested with Angular 11. 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   

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

Related Posts

VMWare Clarity

Building forms with Angular and Clarity Design

Learn how to create high-quality forms using Angular and the Clarity Design System.

Read Article

Using HTML5 Date Input with Date Objects and Angular

Learn how to use JavaScript Date Objects with the native HTML5 datepicker and Angular Forms.

Read Article

Intro to Angular Http Interceptors

Learn the basics of using Http Interceptors to handle Http requests in Angular.

Read Article