 So we were in a coffee shop sort of, we're in a tavern, we're not in a coffee shop, we're in a tavern Why are you lying? We're in an empty tavern, it's a completely organic We're in a pub It's an organic, it's an empty space It's a pub? It's a pub So module bundling is a thing It's one of those other things that make us cry on a daily basis to be honest But it's a necessary evil because then we get all the years 2015 goodness today You've been dealing with a lot of the tools that end in if I or iffy Browserify, Babelify, Rollupify is my current if I set because I tried Babel and Rollup without the iffy bits and it didn't work Somewhere, someone envies you It's not me, someone probably does No it doesn't We should probably talk about what all that stuff is Yeah, you tell me how to fix it and that would be great It's not happening So Browserify, Browserify Let's start off with Browserify It's a tool for compiling your Node, Flavor, CommonJS modules into the browser It's basically stuff you grab off NPM It'll analyze your require calls Build a bundle that you can serve up to the browser using a script tag It's pretty Yeah, so basically when you do like require brackets, whatever you put inside What it does, it looks for that file And then just basically inlines it into one single JavaScript file So then you create a JavaScript bundle Yeah, so basically packages published to NPM Originally intended for Node will just work in the browser It's kind of nice for little utilities and stuff like that Yeah Using it's pretty straightforward So you go and require something like, I don't know, a module called Magic They're probably easy I don't even want to look it up You've made it I haven't made it You have Carry on Okay, so let's say that you've required in a module called Unicorn You can then go and start using it Like do you want to go and dance You go and run Browserify against it to generate a bundle And when you try it out in the browser It'll go and log a message Dance like nobody is watching you Because they're not I'll always watch you dance, Addy And that's where the lawyers come in So we talked about Browserify Yep We'll come back to that We also have to mention Webpack So Webpack Webpack is like the new hotness and I've not looked at it Because last time I spoke to you using this You seemed like you were in severe pain I had a bucket next to my desk for my tears Just came from Webpack So Webpack it's great, it's useful It's not the nicest thing to use So Webpack is another module bundler It packs your common JS modules Your AMD modules in the browser It has a few other features It's got like things like loaders For transforming resources into JavaScript So you could take something like JSX Just load it in It'll do all the transformations for you Loaders are sort of like tasks In other build tools So you'd use it as a way to get you Sort of front-end build steps Ish? This is the things like I'm struggling to figure out what it does Over Browserify and everything else Okay, so let's ignore anything that I've said there The main thing that I like Webpack for Is a feature called code splitting Code splitting lets you basically Split your code base into chunks And you can then go and load them on demand It's kind of nice Does it just have a cross-browser way Of loading in these extra chunks of JavaScript? Yeah, basically you can configure What you want, how does it You want to split your code base up And it'll just figure out the rest It's kind of nice It also has this other feature called hot module replacement Have you heard of that before? No It sounds great, it's HMR So that's used to inject updated modules Into your active runtime So let's say that we had a chat widget That relied on some sort That relied on a bunch of different modules And some of those modules ended up getting updated You could inject the updates Into your active running runtime And just get it working Fair enough It's kind of cool It's like live reload for every module But on live It's extra live Using Webpack is pretty straightforward Go and install it globally Run it against your app to go and generate a bundle And then just include it using some script tags Pretty straightforward It's got a config file as well Everything's got to have its own config You're probably wondering What the difference between Webpack You don't care anymore You're just dead on the inside I can kind of see there being some advantage But at the same time I don't think I'd ever Used the Webpack features What's wrong with you? Well, Browlify just makes sense And if I could get away with not using Browserify Then I would, but I can't Picking, you know A choice between Webpack and Browlify Is a little bit more nuanced than just Saying they both do the same thing If you only care about features, it depends on the features If you want the code splitting Or the hot module replacement, go and use Webpack Browlify is a little bit Smaller and more modular It lets you go And select plugins And compose them with transforms It's nice Webpack, I would say Brings more features to the table And it puts those in core But they're both pretty extensible So try them both out, use whatever makes sense Moving on Samsung recently put together this repo Called the cost of transpiling ES2015 to ES2016 And he tried out a whole range Of different module bundling strategies He found out that there were Some very small differences Once you start pairing Browlify And Browlify, your Webpack configs And other bits and pieces The numbers They vary slightly You don't start really seeing huge wins Until you try out closure or rollup Have you tried out rollup before? I've added it now Because I think we had this discussion of Why would you need rollup in a Browlify, Babelify world And it was the tree shaking Yeah, so rollup Assumes in some cases that you're going to be Probably working with ES2015 modules And it's got this nice feature called tree shaking That excludes your unused Exports from bundles Webpack to Beta, I want to say Has got support for tree shaking as well If people want to stick with Webpack But it's a useful feature Good for eliminating Sort of dead code That you don't really need I believe Richard Harris has got A good blog post on Medium That explains the differences between tree shaking And dead code elimination And it's worth checking out But rollup's pretty straightforward to use Just go, install it globally Specify what format you want your output bundled to take Whether it's common JS or what have you And it just does its thing As it turns out, rollup's output Was a few kilobytes smaller I think I read somewhere that a few people Trying this stuff out have found On average, they were getting 20 or 30% wins Using rollup, that's again Assuming you're playing around with ES2015 modules But presumably as you use it more and more The options might actually grow as well If more libraries are using ES2015 But also, this is a nice little Visual from Sam Basically, the TLDR Is Closure actually giving you the smallest size If you're looking at module bundling stuff We didn't even talk about Closure At all But people should check out this repo It's a good helper for roughly Guessing what's going to be Useful running through its runtime And it's nice seeing all the options I think the thing is It comes down to a point of what works for your project And is the easiest For you to work with There's no clear winner On there to the point where it's like If you clearly do all this pain You're going to get to a nice clear reduction In file size, it's going to be minimal Yes, so if you're not Using an if-i tool In your current workflow Well, Webpack doesn't have an if-i in it So we go Webpackify The thing is, I can see it happening next week now Webpackify Well, that's our job, slowly making JavaScript worse On a week-to-week basis