This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Tree Shaking" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kent C Dodds: Tree Shaking is another buzz word associated to webpack as far as I know the earliest bundler to do tree shaking is a bundler called rollup. It's really interesting approach, it doesn't do near the amount of things that webpack does, but it's cool so you can look into it.
[00:00:27] But what tree shaking does, Tobias who is the author of webpack said, tree shaking creates dead code, I'll show you what that looks like. I say that tree shaking excludes exports from modules where it can be detected, the export is not used, Uglify then deletes the dead code.
[00:00:46] And so that's a lot of words and stuff. I'll demonstrate how that works but, the whole why are around the tree shaking idea is, let's say that you have lodash in your project. Lodash is an example of a really useful module that is enormous, and so you want to avoid sending the entirety of lodash to your users, if you can.
[00:01:10] And so let's say that you're only using two methods from lodash. So it doesn't make a whole lot of sense to send the entirety of lodash down to your users if you're only using two methods. But with tree shaking, you could potentially just pull the pieces out that you need.
[00:01:28] And then webpack will say okay, everything else is gonna be dead code for this thing. So yeah, it's pretty handy. I should say that that example doesn't actually work right now because lodash isn't authored in ES6 modules and so webpack isn't able to detect whether certain pieces of code are used.
[00:01:53] So, eventually that's likely to happen. If you want to save a lot of space with lodash they're plug-ins and both babel and webpack plug-ins you can use and save a lot of space. But inside of your own code, you can benefit from this now. And as the community starts taking more advantage of tree shaking, then more modules will expose themselves as ES6 models and then you can start benefiting from tree shaking from other people as well.
[00:02:21]
>> Speaker 2: They had a question, just about are we treating the test glob and source glob differently?
>> Kent C Dodds: Yeah, I think originally when I created the workshop, the test glob and source glob were being treated a little bit differently but now I'm pretty sure that it would work without them being separate in Karma.
[00:02:41] So if somebody wants to try that out and submit a pull request, that'd be sweet. Yeah, that would be cool.
>> Speaker 2: Follow up question the tree shaking, is this something similar to UnCSS but for JavaScript?
>> Kent C Dodds: Yeah, good question. So UnCSS basically looks at the CSS on your page and determines what CSS is not being used on that page.
[00:03:06] And then you can remove that CSS code. It's similar. The same idea applies to tree shaking where it can determine what's not being used. The cool thing about tree shaking is this can happen statically and at bundle time. And so you don't have to like run your app you don't have to do it like anything really special, you just have to use ES6 modules and configure babel properly to not transpile those so that webpack can deal with them.
[00:03:34] And then statically webpack will just remove those from the exports which creates dead code and then Uglify will remove that dead code.