DEV Community

Discussion on: ๐Ÿš€ Dynamic Imports (Code Splitting) | ES2020

Collapse
 
starboysharma profile image
Pankaj Sharma

I am wondering if a user clicks a button ten times which means we are going to import app.js each time. So, it will affect app performance or not? ๐Ÿ˜…๐Ÿค”

Collapse
 
nialljoemaher profile image
Niall Maher

Good question, it will be available in the browser memory. By clicking it again you don't reload it. It's smart enough to know it has the bundle loaded so it will no longer need to be fetched from the web after the initial load. So it won't negatively affect your performance. ๐Ÿš€

Thread Thread
 
gorvgoyl profile image
Gourav

are you sure? don't we need to check first for undefined and then load the module

if(!app)
{
app = await import("./app.js");
}

Thread Thread
 
nialljoemaher profile image
Niall Maher

You could wrap the whole thing in a try catch if you wanted some error checking. This is just a super simplified sample.

Thread Thread
 
gorvgoyl profile image
Gourav

no this is not about error checking.. if we check beforehand that the module is already loaded then we need not load it again

Thread Thread
 
nialljoemaher profile image
Niall Maher

Nope, run the code with the network tab open and you'll see it's only fetched once no matter how many times you click the button.

Thread Thread
 
gorvgoyl profile image
Gourav

got it, if that's the case then it's okay.