Smaller Bundles with Angular CLI Bundle Budgets

the amount of JavaScript that you send over the wire from your application otherwise known as the bundle size is the most important factor for determining the performance of your application and the experience of your users hi my name is Stephen flowin today I'm demos Langua we're going to be diving deep into bundled budgets and application performance by adding a budget to your angular application you can get warnings or errors when your application exceeds a certain size there's a couple ways of doing this you can do this based on different chunks of your application or you can do it based on the initial payload size that's what we're gonna be taking a look at today let's get started as always we are starting with a brand new blank CLI project so you can see you normally see like configuration here now today we're looking at bundle sizes and the budgets feature so what we're gonna do is we're gonna start off with a very kind of basic bundle we're gonna take a look at the size and then we're gonna go ahead and add things and see how we can control the size of our bundle using these budgets and so what I find it's gonna be really helpful to do is if we do an NG build - - Prag and although you should never do this in production I'm actually gonna do an NG serve - - prod just so this is gonna take longer than normal you should not use it for testing you should not use this for production this is just for testing and debugging what this is going to do is this is going to repeatedly every time we make a change to our application automatically re-render the application as a production but also it's going to do a ot it's going to do a lot of the things we can expect but one of things you'll notice here is that the bundle size is actually too big and so this is because of the live reload functionality it actually includes a bunch of other things we're seeing 313 KB here whereas if you just did an NG build - - prod you would see that this bundle size is much much smaller so while we let this run in the background what we're gonna do is we're gonna jump over to our in your dot JSON file because this is where we do our bundle budget configuration we're gonna go directly into the production configuration because in general you don't really care about development it's gonna be much bigger it's it's gonna be not really something you can do something about what we can do here so we can add the budget ski and now the budget ski takes an array of budgets and so the budget that we're going to be building here is going to be of type initial so you can see there's a bunch of options here you can but it all of your files all of the scripts you can say that any individual file or any bundle but I think the one that we care most about the one that users care most about is definitely the initial because all of the other bundles can be lazy loaded they can be code split all those sort of things but the initial bundle the user has to pay for and then what I'm going to do is I'm going to set up both the maximum warning of typically I would do about two Meg here but I'm just gonna for now say 100 KB just we see some warnings and then let's give it a maximum error of maybe 500 kV so the way you're gonna break that in just a second here and this is Jason saying and I get all the commas correct and so we saw from our production bill that we just did that a normal out-of-the-box kind of hello world angular application is around 172 main and then we've got our on 60k of polyfills so not the smallest application Ivy's gonna make this much smaller but there's actually a lot packed into this right so you've got all of the power of angular baked in you've got all the polyfills to work on older browsers which you can kind of comment a bunch of those out if you are shipping only on newer browsers so let's just take a tiny look at that so for example if you want to manage the polyfills you can go into the polyfill dot TS file here and you can see that by default we're including yes seven reflect which you don't actually need if you're doing a production build so if we commented that out and we did a rebuild you're gonna see that that main bundle size is going to drop and now now that we've added in these bundle budgets we're going to start seeing warnings every time we do a production build so this bundle size is too big so our hundred KB budget which is much too small but we've exceeded it by 111 KB and so what I'm gonna do is I'm going to kind of slowly add thing to show off how bundle sizes change as you add different dependencies and how budgets can help you understand that so let's go ahead and turn back on this polyfill and let's go a little bit further let's turn on all the IE nine ten and eleven polyfills so we're gonna go way back when and do kind of all of these things and so you'll note that I am adding a couple polyfills that don't come even with the base install so we're going to want to install classless JSA yarn add classes je s and then we're also going to add the web animations which only is needed if you're using the animation builder but we're going to ignore that for just a second and just add them to increase the size of our bundle so we'll add both of these dependencies into our application and now when we do an NG build the - just prod we're gonna see that this bundle size is much bigger than our original hundred KB budget and while I don't think we're actually going to exceed our 500 KB error we're gonna see that just adding all of the extra polyfills add something like yeah we went up from 111 so we added almost another 109 Kb just adding polyfills all the way back to IE 9 so as always if you can not ship any nine support if you if your user base does not need those sorts of capabilities definitely consider that because otherwise you're making all of your users pay for those polyfills so next thing I want to do is I want to go ahead and turn on angular material and the animations so I'm gonna go ahead and do ng add angular slash material so this is gonna do is this is going to install a material project and it's going to automatically only turn on two things for me by default so the first thing it's going to do is it's going to turn on the animations and so animations are actually one of the the biggest parts of my bundle here now so if we take a look at our orders are a dimensional here we go we can see it's imported the browser animations module and then in addition to that it's added to our angular Jason we've got the CSS the pre-built theme so the indigo pink theme is coming in and one thing to note is that that indigo pink theme includes all of the CSS for all of the angular material components so there is a way if you take a look at the theming guide on the angular material website you can see that they actually show you how to only pull in the CSS for the components you're using but we're showing off kind of bigger bundles right now so let's go ahead and do an energy bill - prod and we're gonna see how big this bundle is all right so we're up to around 456 KB just within your material the CSS ringer material the browser animations module and then all of those polyfills so let's go ahead and now add in another library that I think your developer might use very commonly such as the router module so import that from at angular slash router and then just importing it in es6 is not enough because that would actually be shipped or that would be stripped away by tree-shaking so we actually need to go ahead and import it so that we added to the dependency injection system and now when we do a build I'm expecting that the bundle size is now going to exceed our error warning or our error limit and now because our bundles more than 500k be our initial bundle is 500k B will see that it will actually build see that it's too big and then kind of refuse to output it so instead of succeeding RNG build dashpot like it normally does it will actually now error out and so this is a really nice way of saying hey let's let's be very aware and very conscious of our budget sizes you probably shouldn't set that at 500 kV I think a more reasonable limit would be somewhere around 2 Meg and five Meg but it really does depend on your user base so maybe we warned it to Meg I think that's warm at the 1 Meg and we error out at 5 Meg because it's at about 5 megabytes in terms of the initial bundle size where things like chrome are going to start throwing out warnings to the user if they have data saving on and so it's it's very important to be aware of the size of your application because even if the user is not being warned even if you're not exceeding kind of this Mac theoretical maximum limit of what you should be sending down to the browser your user does pay for this time right so they pay for it every time they load they pay for the CPU they pay for the power and battery on their phone all those things they end up being a cost of visiting your application and so by making your bundles smaller you're actually doing a ton of benefit to your users and really making them more likely to enjoy your application more likely to come back so with that we have now added a very useful budget or your application and we've also taken a quick look at some of the things that can kind of increase the size of your bundle so if you're interested in understanding a little bit more about this bundle size maybe you've already been building out an application you're not sure what's attributing to that bundle size overall what you can do is you can do a production build and let's turn on source map and so what all this will do is this will output the normal JavaScript file a little also for every JavaScript file output a dot map file that will tell us the source and the origin of that bundle size I'm gonna find this to be really a useful thing to understanding budgets in order to understand you bundle sizes this is actually the number one step that I make to developers that are trying to increase the initial load performance of their application is understanding the bundle that you're putting together and what you're putting out to the user so this is it's just a small bug that was just recently fixed we should be ignoring those math files but if I go into the dist folder for my application I can see all of the JavaScript right next to map files and now if I use a tool like source map Explorer seconds a yarn global add source map Explorer this will just give me a source map Explorer command line tool that I can use to point at these source Maps so source map Explorer and then we're gonna point it at our main J's bundle and this is gonna pop open a browser and then in that browser we can see here's animations adding about 73 KB to my bundle here's router adding about 67 KB and then you've got the kind of more normal pieces of angular and so if you're pulling in a lot of arcs yes if you're pulling in custom component libraries you can see all of those things as part of your bundle and you can understand all the things you're making your user pay for so with that hopefully you can make smaller more performant applications for your users and I hope seeing the next one thanks so much

Channel: Digital Fluency

Views: 4,961

Keywords: tutorial, demo, coding, live coding, angular, how to, angular cli, angular 6, cli, command line, programming, web development, user experience, webpack, front-end development, demos with angular, javascript, angular tutorial

Id: 5pXkss0hcPM

Length: 11min 25sec (685 seconds)

Published: Wed Sep 05 2018