{"id":1411,"date":"2023-09-06T05:00:00","date_gmt":"2023-09-06T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1411"},"modified":"2023-09-01T15:15:55","modified_gmt":"2023-09-01T22:15:55","slug":"analyzing-your-bundle-size","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/analyzing-your-bundle-size\/","title":{"rendered":"Analyzing your bundle size"},"content":{"rendered":"\n<p>We covered <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/build-size-budgets\/\" target=\"_blank\" rel=\"noopener\" title=\"\">build budgets<\/a> and how they can help keep your application performant by detecting when a new dependency dramatically increases the size of your build output.<\/p>\n\n\n\n<p>If you want to look at your build bundle and determine which dependency\/module is the biggest, there&#8217;s another tool at your disposal: The <a href=\"https:\/\/www.npmjs.com\/package\/webpack-bundle-analyzer\" target=\"_blank\" rel=\"noopener\" title=\"\">Webpack Bundle Analyzer<\/a>.<\/p>\n\n\n\n<p>To install it, use the following <code>npm<\/code> command:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install --save-dev webpack-bundle-analyzer<\/code><\/span><\/pre>\n\n\n<p>Then, run your Angular build with the option that generates build statistics:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">ng build --stats-json<\/code><\/span><\/pre>\n\n\n<p>Finally, run the Webpack Bundle Analyzer to read those build stats and give you a visual output of that bundle:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx webpack-bundle-analyzer dist\/stats.json<\/code><\/span><\/pre>\n\n\n<p>This command opens a new tab in your browser with the following user interface. Each rectangle represents a Javascript module. The bigger the rectangle, the bigger the module.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-1024x605.png\" alt=\"\" class=\"wp-image-1413\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-1024x605.png 1024w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-300x177.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image-768x454.png 768w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/09\/image.png 1124w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In the above example, we can see that the application code (<code>main.js<\/code> &#8211; in green color) is a lot smaller than the application dependencies. <\/p>\n\n\n\n<p>For instance, we could improve this project by removing <code>polyfills.js<\/code>, as these polyfills were included to maintain compatibility with the now-retired <a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2022\/06\/15\/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Internet Explorer<\/a>, and they take more space than our application code!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We covered build budgets and how they can help keep your application performant by detecting when a new dependency dramatically increases the size of your build output. If you want to look at your build bundle and determine which dependency\/module is the biggest, there&#8217;s another tool at your disposal: The Webpack Bundle Analyzer. To install [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,17],"tags":[],"class_list":["post-1411","post","type-post","status-publish","format-standard","hentry","category-angular","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1411"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1411\/revisions"}],"predecessor-version":[{"id":1416,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1411\/revisions\/1416"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}