Web Performance is becoming more and more demanding as Web applications
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.
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!