How to stay fast and fresh with Angular
Why Stack Overflow recommends it
Stack Overflow users link it as the Angular team's own guidance when answering how to analyze bundle files and speed up Angular builds.
Recommended by 0 people across 0 different months, 2017 to 2021.
What it is
A 20-minute live coding demo from web.dev LIVE 2020 in which Angular team member Stephen Fluin walks through principles and tools for improving Angular startup performance and bundle size. It is published on the Chrome for Developers channel.
What people said
Cites Lex Kuncevic · 2017-10 · Stack Overflow · on “Angular CLI output - how to analyze bundle files”
UPDATE 2024 (v17 and above) In case you are using the latest Angular [LINK] (Vite set by default from Angular v17 [LINK] ) then you have to try esbuild analyze (official) [LINK] or esbuild-visualizer [LINK] to inspect your bundle size. You need to enable the statsJson option in angular.json . Then you will have a stats.json in your dist folder. "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "statsJson": true, ... } } UPDATE 2020 (v16 and below) : The Angular team strongly recommends to only use source-map-explorer to analyze your bundle size instead of webpack-bundle-analyzer . According to them, webpack-bundle-analyzer and a few other similar
Cites abhay tripathi · 2020-07 · Stack Overflow · on “Angular CLI output - how to analyze bundle files”
2020 angular team recommendation The angular team strongly recommends to only use source-map-explorer to analyze your bundle size instead of webpack-bundle-analyzer . According to them, webpack-bundle-analyzer and a few other similar tools doesn't give the actual info pertaining to angular build process. More info can be found at web.dev - [this video] To install source-map-explorer globally:- npm i source-map-explorer or yarn global add source-map-explorer To analyze bundle size :- source-map-explorer dist/my-awesome-project/main.js Remember to have your source map files available (which can be obtained by building with ng build --prod --source-map=true ) SIDE NOTE: I have personally used webpac
Cites Nate Anderson · 2021-11 · Stack Overflow · on “How to speed up the Angular build process”
If this answer helps you, please leave a comment on what specific advice was helpful! I recently upgraded from Angular 8 to Angular 13. My build time was comparable (~10 minutes in both Angular 8 and Angular 13), but I struggled with my rebuild time (i.e. I use --watch while I develop; if I change only a few files, Angular 8 was recompiling in <10 seconds ; Angular 13 required another 10 minutes !). I used angular.json (see below for a screenshot) to specify "aot":false and I saw much better re build times (back to ~8-10 seconds) -- this option is the same as angular-cli ng build command's [LINK] --aot=false . I'm adding my answer because currently no other answer suggests trying to use "aot