Important links
https://dev.to/sheddy_nathan/possible-ways-to-reduce-your-webpack-bundle-size-js-secrets-550

https://survivejs.com/webpack/what-is-webpack/

https://blog.jakoblind.no/3-ways-to-reduce-webpack-bundle-size/

https://webpack.js.org/guides/code-splitting/

https://blog.jakoblind.no/webpack-code-splitting-libraries-what-to-do-with-the-files/

https://itnext.io/react-router-and-webpack-v4-code-splitting-using-splitchunksplugin-f0a48f110312

https://medium.com/react-weekly/code-chunking-with-webpack-a-pragmatic-approach-e17e8bcc6453

https://jeremygayed.com/dynamic-vendor-bundling-in-webpack-528993e48aab

Approximate transcript
This is a technology icing presentation and you are listening to Karan Bhandaru and in this episode we will be talking about how do you reduce the size of your web application – more specifically reducing the size of your web application in production.When I say web application, I mean, it could be.Any angular or react application that you are bundling with the help of something like webpack.Most of them went back an hour that is reacting angular provide you something called as production mode.This production mode is something that.You could use so for example, if you do webpack minus B mode is equal to production, it enables something called, is uglification it enables.It you know magnifies your file and it also you know make sure that your long variable names are converted to slightly shorter variable names.And typically most of the fatness in application comes from Lou Dash.An in some cases comes from moment JS because you need to maintain international isation of with various.Products, an moment, has very good date related functionality. So I would recommend that you use a slimmer version of low dash for example, there is low dash slash get low dash slash concat so you know you don’t have to try your best not to use lodash. But if you still want to use it use the minified version and you can also install something called a slow dash webpack plugin.Um.And there is something uh and and when you use it. You can you know put it in your webpack config JS that will do that work for you?An try your best to use ecmascript 6 module centers in tax for example, import connect from react redux instead of you know, some doing something like import everything from react redux like just import the entire library don’t do that just import a specific part from that.And then you know webpack will ensure that only those parts are included in your final output.You could also check what is causing your web application to inflate so much there are very good tools like Webpack Bundela Analyzer?And source map explorersweb backbend bundle analyzer shows a graph and a heat map of what is causing what to?Expand sometimes what happens is if you include high charts and that specific module of world of world map can be extremely massive so it will be good if you can you know split the libraries as a separate bundle?Or maybe you know fetch the bundles asynchronously. I’ll talk about that, more in the upcoming minutes.And No.In order to split there is something called as webpack junk manifest.Ann Webb back there is something called, is a manifest plug-in.An it will include the file names of a generated bundles, including the hash and then you can refer to your to your chunks in the script file like which kind of chunk. You want and the other alternative is using something called?Good there is something called as you know a waiting on the import so typically most people just put imports on the Top, but there is an article by Webpack and that talks about using import from your from within your function imagine calling await import.Your Lodash then what will happen is you’re importing of that specific module of Lodash happens only when the person views the page.Um.So you can you can load some things this technique is called? Is lazy loading?An this is quite helpful in reducing your bundle size. So Suppose a four person does not open. The particular page where the world map is required. Then it may not be loaded only when the specific pages loaded then it has to be loaded.And then there is something called as you know.Split chunk plug in and the other one is.There’s something so here you mention.Here you mention what?Chunks you want to split your so it’s an optimization dot split chunks and you mention that OK. I want everything in the node underscore module folder to be as a part of vendor. GS everything under the so slash Maine to be a part of the main application, so slash subsidy to part of the subsidy application.And then you can use that?Of you know import syntax to await on the import from within the function to get that particular file. It’s called dynamic importing.Ann Webb back has got very good or bond analysis tools like Webpack Mundella or optimize overpack stats plugin.It’s quite intuitive to run it.Ano split chunks plugin is what you could do an?Make sure that you use the you know the smaller version of lodash not that.Like you do low dash slash thing instead of doing the entire lodash. It’s it’s.It’s quite helpful and there is also something called us common chunks plugin.Um an it’s it’s given by the author of a pack and it accepts a callback.An you can also include that in in it for and there is something always differ. So you can differ your some of your JavaScript files that are required for so suppose if you have done a chunk of world map. Then you, you do not load it. At the time in the script bundle you can load it. Sometime later and you can use that default plugin and there is there is a difference between a sink and Defoe in your scripts.Scripts were you mentioned the source you can put before there an that we the amount of fatness in your JavaScript could reduce.So a tree shaking is automatically enabled in Webpack, an that is only possible if you use?This one sometimes you may be troubled by CSS S so you could bundle your CSS S into a separate file an you some other optimizations. For example, if you use SSA SAS less sorry sass or less that way you’ll be able to know what is the common functionality?And only that particular functionality so you know you can think object oriented in your CSS S also and that we will be able to.Reduce UCS S files by knowing what to actually.Import and then you can also look into advanced uglification options because sometimes if you uglify everything. Some PDF library example. For example, is not working with uglification then you can you know go to uglification plug in and?Tell them OK, I don’t want to uglify this particular one.Ann.Sometimes there is also something called, is react code, splitting if you want to, if you want to go ahead and Dooley could react specific code splitting so look. It look into the Webpack Docs. There is also a very good book, I have mentioned in showing words.Um.That talks about how to?Go about using webpack in a more advanced fashion and there’s an excellent site called survive GS survive GS as.Extremely good tutorials on how to use webpack. I think as in advance user when you start running into issues regarding you know side being too slow and what you also could do is sometimes you are as your may be hosted in US eastern in your users are in Asia try your best to move this vendor files. These the SRC files into a CDN.So that way it is kept in a location, which is closest to the user and the network need not made the round trips all the way till?US to get that particular JavaScript file.And try to use HTTP 2, features by making sure that your JavaScript files are all under 1 MB.An don’t use things like.Bootstrap use bootstrap min dot men don’t use.The normal libraries that are available for debugging use the ones that are the minified versions, so an also think about your images images could be made into something.Images can be combined into one image and use like a Sprite Amit CSS S has got something called a CSS spriting.So if imagine you have Alpha imagine you have a character with different moods. You can put all this character into one image like small small for Mickey Mouse is and then you can only render a portion of that image so that way instead of the.Website loading 100 images, it could just load that single image.And make sure you use?Proper image optimization for example.It’s it’s OK to render smaller images on the phones and larger images on the desktop.You could use.10s of floor to you know crop transform rotate or Imagemagick to.Process your images in bulk.And there are some impressive image handling tools.That are available.I know try to use SV GS is instead of images as much as possible use tools like Inkscape to create an image and don’t use photo shop because if you use SV GS then even if you zoom in by 200% or 300% it still look crystal clear.Um.And uh.Sometimes it’s OK to run your application.Are some of the compute intensive task? For example, you’re running a for loop on 2000 numbers? Maybe transfer it to a web worker.Ann.If you have a lot of data to be stored go don’t store it in the rammed as such.Keep it and index database in HTML5.Ann.Maybe use a little bit of the local storage.Try not to keep everything in the ram because the UI thread is quite valuable.Ann.Sometimes you can use signal have to.Meet the application look very responsible like for example, you need not pull. The server and ask are you done are you done? Are you done like for something which is very long running you could just ask the server to send you a message.Make an and make sure that you implement throttling in your website so that some irresponsible users don’t.Floody website with too many request that way your server is also responsive to you.I know it’s good if you wanna use start using Geo replication.For your data in the server and try to make your UI fast.Sometimes it’s OK to store the UI elements.In S3 or blob storage.Best is to use a CDN so Verizon CDN, Google, Microsoft have extremely good presence across the world.So keep cracking yourHTML5 web application size visually pleasing coding session, and hopefully a users never get annoyed because of slow application implement the steps. An yeah, happy coding goodbye. This is me. Karan Bhandari, signing off. I work at associated with Socgen as a full stack lead developer goodbye.

Podcast: Play in new window | Download