Angular CLI output - how to analyze bundle files

Question

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?

Answer 1

UPDATE 2020:

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 --prod flag

---

ORIGINAL ANSWER:
You can use webpack-bundle-analyzer to inspect your bundles.

• npm install webpack-bundle-analyzer --save-dev

• modify your package.json scripts section 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.

Answer 2

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.

Answer 3

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.

Answer 4

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