CodeNewbie Community 🌱

Ned
Ned

Posted on

How does dynamic import work on JavaScript?

Hey friends! I'm working on upping my JavaScript skills, and was wondering if someone could explain tome how dynamic import works on JavaScript.

Any help on this would be much appreciated! Cheers!

Top comments (1)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

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. 😎

  • 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.

Search results in VS Code in the Forem codebase searching for import(

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

ruby version rails version Travis Status for forem/forem Code Climate maintainability Code Climate technical debt CodeTriage badge Dependabot Badge GitPod badge Netlify badge GitHub code size in bytes GitHub commit activity GitHub issues ready for dev Honeybadger badge Knapsack Pro Parallel CI builds for dev.to

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'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.