Webpack Modes

[00:00:00]
>> Sean Larkin: Now, you'll also see something called webpackMode. And you'll be like what is this? So this is another feature. And I actually just recently discovered there's some cool build time optimizations that you can use for this.
>> Sean Larkin: But I'm just gonna kind of explain how each of them work.

[00:00:19]
And there are some scenarios where they're really valuable and some where it's less valuable. So you also have the ability to kinda even control, using webpackMode, how the code splitting happens. Now, a really good example of this is, so there's a couple settings. So lazy is default, so it's the default behavior of code splitting.

[00:00:45]
And then there's one called lazy-once. I think lazy-once is really cool because you can use it in dev mode for build speed, right. Because the more lazy chunks you make, you have this linear time complexity, right, because you have to create more bundles. Webpack has to scan these bundles to optimize where the module should be placed.

[00:01:06]
And so there is a smaller trade-off in build time, the more lazy chunks that you make. I mean, it's a very justifiable trade-off, in my opinion. Lazy-once, for example, if you added webpackMode,
>> Sean Larkin: in here. And you can either do a comment or you can break it down as multiline,

[00:01:30]
>> Sean Larkin: Some people like the multiline, so we can try that.
>> Sean Larkin: And so let's say if I set it to lazy-once.
>> Sean Larkin: Now, well, actually, no, let's not do it for this one. Let's use it in a different statement because it's not relevant. So what it does is it takes any code splitting that occurs that's marked with lazy-once, is put into one bundle, right.

[00:02:07]
It's really viable for things like when you're using context, context modules
>> Sean Larkin: And you had webpackMode and you put lazy-once.
>> Sean Larkin: When you run your code,
>> Sean Larkin: You'll actually see less bundles created, right.
>> Sean Larkin: So now you don't have the five individual bundles. And I should actually just delete this and we can look at it.

[00:02:42]
I'll build again. So you still get that asynchronous behavior, right, because it's coming from one single junc, and it's lazy loaded. But any additional files from that same bundle just come in right away, no network request. So this can either be something that you profile and you analyze to see, well, is there kind of a runtime cost for these small, small, small, lazy bundles?

[00:03:08]
If there is, maybe it's valuable to just have them in a single. Or for me, I'm a little bit more strict on it, where I will only do it if it's in dev mode. So there is a neat trick, if we get time for it, basically using what we call the DefinePlugin.

[00:03:27]
You can wrap this code.
>> Sean Larkin: Where is it? There it is. Okay, so I could say something like this. If process.env.NODE_ENV is equal to "development," I'll say this.
>> Sean Larkin: And then I'll say else. So if I'm in production, I'm gonna basically write the same code, except not use the webpack mode, right.

[00:04:01]
So webpack by default injects a macro replacement to this variable. When you set mode to development, this macro converts to development, right. So by default webpack can evaluate this and drop the code, and drop the code branch in the else statement. And in the same way, if you set production mode, webpack would drop the code inside of this logic statement.

[00:04:31]
Does that makes sense? So, essentially, you're able to get your build performance by having only created one lazy bundle for a context module. I discovered that this was kind of a cool trick working with Adobe and Behance, who was creating thousands of locales and thousands of lazy loaded bundles to load them.

[00:04:54]
But the builds were like six minutes. So this cut their build time by,
>> Sean Larkin: Like 80% for their dev mode, right. Because this is a performance feature that it's separated into individual bundles. And so if you don't need them, if you don't care. You really don't care about performance optimizations in your dev mode, right.

[00:05:18]
This is a neat trick. You can leverage it.
>> Sean Larkin: And I think it's very valuable. But, yeah, so I'm just gonna check this out. And then we can talk about the last, the newest, the latest and greatest, bleeding edge, webpack magic comments.