loading...

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 Author

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 Author

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 Author

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.