I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know which classes and functions have been actually put in the bundle after tree-shacking and all other steps?
Add a comment |
4 Answers
UPDATE 2024 (v17 and above) 🎉
In case you are using the latest Angular (Vite set by default from Angular v17) then you have to try esbuild analyze (official) or esbuild-visualizer 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 tools doesn't give the actual info pertaining to Angular build process.
More info can be fount at web.dev - https://youtu.be/B-lipaiZII8?t=215
To install source-map-explorer globally:-
npm i -g 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 source maps ready: they can be obtained by building with
ng build --prod --source-map. However since v12 you don't really need to pass--prodflag
ORIGINAL ANSWER:
You can use webpack-bundle-analyzer to inspect your bundles.
npm install webpack-bundle-analyzer --save-devmodify your
package.jsonscriptssection with"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"npm run analyze
You can checkout this repo it is just a simple angular app that demonstrates how to implement lazy loading and it has webpack-bundle-analyzer already setup as above.
Also you can configure Angular CLI budgets to monitor your bundles size.
UPDATE:
Also with @ngx-builders/analyze you can do:
- ng add @ngx-builders/analyze
- npm i source-map-explore -g
- ng run [YOUR_PROJECT_NAME]:analyze
UPDATE:
In case if you are using nx console (aka angular console) now it has bundle analyzing feature built-in also bear in mind that stats.jsonpath might be different for each project stated by @Klaster_1 in comments.
answered Oct 4, 2017 at 23:30
angularconsulting.au
28.5k14 gold badges91 silver badges105 bronze badges
8 Comments
Klaster_1 Нет войне
Note: path to stats.json might be different for each project.
Igor Kurkov
Also needs
--output-hashing=none to have main.js without hash - please add to command above
Taylor G
source-map-explorer dist/my-awesome-project/main*.js accounts for output hashing; source-map-explorer dist/my-awesome-project/*.js is also worth considering to analyze lazy loaded modules at the same time.
Roobot
It now seems to be
--source-map=true, not --sourceMap=true.
sandrooco
@cmxl & kerosene check the updated answer.
|
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 - https://youtu.be/B-lipaiZII8?t=215
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 webpack-bundle-analyzer for quite a long time. But from now on source-map-explorer.
1 Comment
Maksym
Please keep in mind that first you need to build your project with source maps enabled, like ` ng build --prod --sourceMap=true`
Edit [2020-06-08]
The Angular Console has been renamed to Nx Console. When you go to the console in VSCode you can run the build command with the statsJson option enabled. This generates, depending on your TypeScript configuration, some stats-es*.json files into the build directory alongside the compiled stuff. These you can use with the webpack-bundle-analyzer (as mentioned in the accepted answer)
npx webpack-bundle-analyzer ./pathto/stats-es2015.json adjust the EcmaScript number according to your settings.
Old Answer
Since Angular console 7.4, there is a new way analyzing your Angular bundles.
- Install the vscode extension "Angular Console" by Nrwl technologies.
- Optional: If you haven't, turn your workspace into an nrwl-nx-workspace with
ng add @nrwl/schematics(this is just an extended angular workspace, but it works with the default angular workspace, too). - Go to Projects > Select the app you want to build and run the build command with aot and production.
And that's it. The output is the following. It contains the bundle size and all parts of the bundle. You can select the file you want to analyze (main/polyfills/1/etc). It will display that pie for each of that files. Pretty detailed and easy to use.
3 Comments
Liveindream
Is it still work? If so, can you elaborate on how you get this view?
Felix Lemke
The Angular Console has been renamed to Nx Console. I'll have a look if it is still similar.
Yevhenii Herasymchuk
There was no renaming. nx.dev is a completely different project ( built on top of the ng-cli, but completely different, amazing, project )
Follow the below steps to add webpack code analyzer to your angular app
- cd into your angular app > npm install --save-dev webpack-bundle-analyzer - Add below lines to script block of package.json "build:stats": "ng build --stats-json", "analyze": "webpack-bundle-analyzer dist/<your-project>/stats.json" , "build-analyze": "npm run build:stats && npm run analyze", > npm run build-analyze 
1 Comment
JimmyTheCode
This didn't work, but I switched
"analyze": "webpack-bundle-analyzer dist/stats.json" with ` "analyze": "webpack-bundle-analyzer dist/<my project name>/stats.json"` and it's finally working. Thanks for the help!