The ES2020 features were just approved by the TC39 committee, and in the proposal, you can import a file dynamically. What does that mean? Inst...
For further actions, you may consider blocking this person and/or reporting abuse
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
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.
got it, if that's the case then it's okay.
Good catch! A typo on my behalf. Thank you 💜
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!