Issue
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?
Solution
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 --sourceMap=true
. 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.json
path might be different for each project stated by @Klaster_1 in comments.
Answered By - angularrocks.com
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.