A dynamic import is like a regular import except that the import is done only when you want to import it. Under the hood, a dynamic import is a function that returns a Promise. When the Promise resolves (is done), then you can access the functions, variables, classes or whatever you had wanted to import.
Why would you want to do this? Well, how fast a page loads is super important for user experience. No one likes a slow site. If you need client-side interactivity on a page, but not right away, then a dynamic import is probably the way to go, i.e. only load what is really necessary right away for the page or application.
The CodeNewbie site you're on right now is powered by Forem, the software that also powers dev.to. We use dynamic imports in a bunch of places, so you have some real world examples to look to. 😎
We have a drawChart function which is used for drawing charts for our analytics dashboard. We don't need all of these imports until we draw the chart so loading them via a dynamic import makes sense. See github.com/forem/forem/blob/3483d6...
For our onboarding, we only load the code for the onboarding screen if a community member has not completed the onboarding process. We were initially loading this code all the time, but it only ever got used if someone was being onboarded. Another great candidate for using a dynamic import! See github.com/forem/forem/blob/3483d6...
There's more examples as you can see in this search I did in the project. Feel free to check it out in the Forem codebase.
Welcome to the Forem codebase, the platform that powers
dev.to. We are so excited to have you. With your help, we can
build out Forem’s usability, scalability, and stability to better serve our
communities.
What is Forem?
Forem is open source software for building communities. Communities for your
peers, customers, fanbases, families, friends, and any other time and space
where people need to come together to be part of a collective
See our announcement post
for a high-level overview of what Forem is.
dev.to (or just DEV) is hosted by Forem. It is a community of
software developers who write articles, take part in discussions, and build
their professional profiles. We value supportive and constructive dialogue in
the pursuit of great code and career growth for all members. The ecosystem spans
from beginner to advanced developers, and all are welcome to find their place…
I live somewhere where we get snow in the winter. During spring, summer, and fall, there is no snow (usually 😆). I could carry all my winter gear around with me everyday. To the beach, on a hike, etc. People would probably give me funny looks, but life would go on. Think of this as importing everything right away.
I've come to my senses though and have decided, it makes no sense to carry around my winter gear with me everywhere I go, so I put it in my closet. Later in the year, winter comes along, and now I need my winter gear, so I get it from the closet and, now I'm prepared for winter. Think of this as importing something only when you need it, i.e. a dynamic import.
For further actions, you may consider blocking this person and/or reporting abuse
Hi Ned. I'll do my best to explain things.
A dynamic import is like a regular import except that the import is done only when you want to import it. Under the hood, a dynamic import is a function that returns a Promise. When the Promise resolves (is done), then you can access the functions, variables, classes or whatever you had wanted to import.
Why would you want to do this? Well, how fast a page loads is super important for user experience. No one likes a slow site. If you need client-side interactivity on a page, but not right away, then a dynamic import is probably the way to go, i.e. only load what is really necessary right away for the page or application.
The CodeNewbie site you're on right now is powered by Forem, the software that also powers dev.to. We use dynamic imports in a bunch of places, so you have some real world examples to look to. 😎
drawChartfunction which is used for drawing charts for our analytics dashboard. We don't need all of these imports until we draw the chart so loading them via a dynamic import makes sense. See github.com/forem/forem/blob/3483d6...There's more examples as you can see in this search I did in the project. Feel free to check it out in the Forem codebase.
For empowering community 🌱
Forem🌱
For Empowering CommunityWelcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.
What is Forem?
Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a high-level overview of what Forem is.
dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place…
I'll leave you with a funny analogy.
I live somewhere where we get snow in the winter. During spring, summer, and fall, there is no snow (usually 😆). I could carry all my winter gear around with me everyday. To the beach, on a hike, etc. People would probably give me funny looks, but life would go on. Think of this as importing everything right away.
I've come to my senses though and have decided, it makes no sense to carry around my winter gear with me everywhere I go, so I put it in my closet. Later in the year, winter comes along, and now I need my winter gear, so I get it from the closet and, now I'm prepared for winter. Think of this as importing something only when you need it, i.e. a dynamic import.