Code Splitting Named Exports

[00:00:00]
>> Speaker 1: Can you lazy load a named export or is it only the default?
>> Sean Larkin: So it's always only the default for now. So, the caveat to that, that's actually a really great question. So, it's always gonna be the default export. And because of that, you do lose the ability to tree shake that asynchronous bundle.

[00:00:26]
Now what you can do is, like, let's say for example, let me see what would I do here? I think a great example is like, you could use low dash or whatever or. So, I'll add lodash-es. I'll talk about tree shaking next, lodash-es. So, essentially when you are using a utility library like lodash-es, which is all pure ESM.

[00:01:02]
You would notice that if you lazy loaded this, that you're gonna get a lot more code than what you actually expected. Right now, we don't have the heuristics for webpac to determine if like, there's no way for us to say like, what aren't you using. We're thinking about proposing that, if you use destructure syntax inside of this.

[00:01:25]
So let's say like, if a user did something along the lines of this here. Like, destructure and said footer, like that's the named export. Then maybe we could use this information to consider, used versus unused. So, the technique that you wanna do when you're lazy loading, so I just pulled in lodash.

[00:01:47]
And so like, let' say I wanna access one function from lodash. Now, in a static world, you would say something like, you can do two things. So one, you can take and separate into a separate file where you only grab the one piece and then you lazy load that.

[00:02:03]
Or you can take and say conts, getlodashunique=aimport of lodash-es. But then we wanna actually access that individual function. So, I would have to look inside the node_modules to see like, what is the path to that direct file. And this was a kind of a technique that people would do when they're using, let's see, here we go, lodash-es.

[00:02:34]
And then it is called unique, I believe. So I would actually go directly to unique, there's no source folder, right? Yep, so.
>> Sean Larkin: Unique. Then this way, this would ensure that you're only grabbing that individual granular module. Even though it's hoisted up to a bunch of other utilities.