I am interested in and talking about JavaScript, ReactJS, NodeJS, CSS, and Software Engineering | 📧 Weekly NL Series: https://newsletter.natterstefan.me
Hello Niall, thank you for that interesting article.
The example you posted would only be valid if you use the await in an async function context-
document.getElementById("button")
.addEventListener("click", async() => {
const { app } = await import("./app.js");
app();
});
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. 🚀
excelente, mi amigo!
Gracias! 💜
Thanks Niall!
No problemo! 🚀
Hello Niall, thank you for that interesting article.
The example you posted would only be valid if you use the await in an async function context-
document.getElementById("button")
.addEventListener("click", async() => {
const { app } = await import("./app.js");
app();
});
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? 😅🤔
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. 🚀
are you sure? don't we need to check first for undefined and then load the module
if(!app)
{
app = await import("./app.js");
}
You could wrap the whole thing in a try catch if you wanted some error checking. This is just a super simplified sample.
no this is not about error checking.. if we check beforehand that the module is already loaded then we need not load it again
Can we already use this natively?
There is some pretty good support already yes:
caniuse.com/#feat=es6-module-dynam...
Wow, pretty cool! Nice article Niall, congrats :)
Cheers Rafael!