Learn Dynamic Module Imports In 11 Minutes

JavaScript Simplified Course: javascriptsimplified.com
Most people are familiar with standard ES6 module imports in JavaScript, but did you know that you can also do dynamic module imports as well. These imports are perfect for code splitting, and speeding up your page load speeds. In this video I will explain everything you need to know about dynamic module imports with in depth real world examples.
📚 Materials/References:
JavaScript Simplified Course: javascriptsimplified.com
Dynamic Module Imports Article: blog.webdevsimplified.com/202...
Destructuring Video: • Why Is Array/Object De...
Destructuring Article: blog.webdevsimplified.com/202...
Async Await Video: • JavaScript Async Await
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:25 - Dynamic Module Imports Explained
03:30 - Example 1: Code Splitting
05:40 - Example 2: Reduce Memory Usage
09:14 - Example 3: Increase Code Performance
#DynamicModules #WDS #ES6

[@oussamakhalfi1751]

this channel + fireship made my brain bigger

[@mohammadsiddiq6056]

Agreeeeeeeed

[@nishantaanjaneyjalan8583]

So fucking trueeee

[@divinsmathew]

+ Kevin Powell as well!

[@bonleofen]

What? Isn't fireship a troll channel?

[@atreysinainadkarni5453]

Hear hear.

[@grmancool]

The letter g: You want me *Kyle writing the word admin: I want you baby*

[@nishantaanjaneyjalan8583]

My sugar boo

[@mtgamer101]

Looked for this, was not disappointed.

[@MomoCoder]

Immediately started searching for this comment :D. I have same issues, esp. function gets really weard when I type c before n.

[@nishantaanjaneyjalan8583]

@@MomoCoder weird*

[@MomoCoder]

@@nishantaanjaneyjalan8583 thanks

[@anticsBack]

Clear, simple and to the point as always. Thank you Kyle!

[@legionsra]

@Web Dev Simplified I would recommend you to extend for another video talking about the caveats or the things to bear in mind about imported modules. For instance, if they launch their own event listeners or any other side effect, when will they die, or how do we release the memory of those imported instances (not the imported file, but the instance), or even more complicated to understand, what would happen if moduleA imports moduleB, which imports moduleA, this definitely will be important for those who share a lot of utils dynamically imported.

[@davzmore3623]

Best js tips on KZbin, thank you for the effort to put out these videos.

[@amittraspal]

The way kyle demonstrates the example...... that's what we call examples. Super useful, and relatable to actual scenarios.

[@johnnydriesen7575]

Nice, clear and usefull examples. Thanks Kyle !

[@BsiennKhan]

I love your style of explanation, clear, concise, simple with examples. Thank you

[@Alessandro-nq3tm]

Dynamic import + async await = perfection :)

[@achtube85]

Awesome and clear explanations, as always! Gracias, Kyle!

[@alfiartya23]

Your explanation for the translation example just blow my mind! Thank you so much Kyle, always delivering good explanation

[@jimzhang32]

My guy Kyle is always productive!

[@ErickPereziChido]

Great tutorial! I immediately starting using dynamic module importing in my work project after watching this. Thank you!

[@oluwaseunismaila8522]

Your tutorials are simply amazing. Confusing concepts clearly explained.

[@helgaludwig793]

Wow, thank you so much! this helped me so much cause all modules are switching to import

[@dinesh08ification]

Wow, this actually helps a lot, learnt something new today

[@heydaddy59]

Elegant! Thanks Kyle for sharing this!

[@erikuriegas97243]

Thank you for what you do, you have truly helped me understand something than can be so complex

[@MrQVeeBoo]

very clear explanation and easy to understand with sample. thx.

[@habibishuta4896]

best Programming channel on youtube ♥️♥️♥️

[@ShivamJha00]

Best web development channel*

[@JackBrunsion]

Great explanation and demonstration!

[@ThugLifeModafocah]

Very good tips indeed. Thanks.

[@ChrisAthanas]

Always clear and no fluff Props

[@techhype3453]

super teaching style great explanation

[@sudarshanprajapati9742]

This video is really valuable for me. Thanks

[@bhaveshverma8629]

Very Nice tutorials. The way use explain is amazing. I always saw your tutorial and get filled with knowledge. Thanks for putting out amazing content.

[@HumbertoRincon]

Useful use cases, thanks Kyle

[@amithbhagat]

Thank you Kyle, it is really helpful.

[@ArKy326]

Always learning new with js tnx mr. Kyle!

[@mrarsenal10vn]

Thanks, Kyle. Really useful

[@Musikur]

This is actually really cool, I did not know about this.

[@raghunathvadlakonda810]

Really Really Worth it. @Kyle you are awesome.

[@willyhorizont8672]

thanks you're really helpful

[@abhijiths148]

Excellent topic... Thanks 👍

[@infinitepurelive]

Awesome content as always

[@avneet12284]

This was truly great

[@sean9829]

Wow. Didn’t know about this one. Thanks

[@sreeragmmundayadan6057]

Really helpful 👍

[@agoodcode]

Great content as always 👍🏻👍🏻👍🏻

[@haoranxu4465]

This is so useful☺️!

[@Aaronmoreno]

you're the best kyle!

[@habibishuta4896]

love your content man

[@LeoPlaw]

Awesome! I was looking for this solution months ago. Better late than never! Now I have some code to update. =)

[@hiroyukinumaguchi1984]

Thank you!!

[@khoaiviet7436]

Thank you. This very helpful

[@Lahiru_Udana]

awesome. thanks

[@user-pn7hp3hc3q]

Good at explaining bro keep it up

[@tanaseadrian8305]

awesome tutorial

[@jhandgreat7079]

Thanks bro!

[@PierreSoubourou]

thanks for your videos text seems to be getting a little bigger, that's great

[@stanislavmalyshev5209]

Good job!

[@ManuelLopera]

This is very useful when using huge libs like pdf.js 👏👏👏

[@nikolromick6134]

Would be great if you show your network loading while demonstrating code usage with example

[@CottidaeSEA]

Sort of but at the same time it wouldn't. The issue with these examples is that they are too small in scale. It would therefore not have a big enough impact on the network. This is similar to how you'd use async or defer to load scripts in a browser by the way.

[@md.asifal-mahmud5952]

Thanks a lot

[@RadiGamer]

damn, that was useful! Thanks a lot man :D

[@dimitridoroshko]

"Hi" in Russian is "privét". Thanks for the video, it was helpful to many of those learning JavaScript and myself included :3

[@definty]

I thought that was pasiba

[@SealedKiller]

@@definty That would be thank you.

[@thefreeze6023]

@@definty spasibo, pronounced spasiba means thanks you

zdarova

[@nightcoder5k]

According to Google: “Hi” in Russian - Привет (privyet)

[@mehinhuseynova1426]

Thank you

[@DuyTran-ss4lu]

Awesome!

[@ozzyfromspace]

Awesome video Kyle! Super informative. I do have one potential concern though. The way you wrote your code in the last example on conditional imports for your render function, you rerun the import function on every iteration of the shapes array. If your shapes array had 500 objects in it, you’d be running import many, many times! My recommendation here would be to memoize the imports. In particular, you can create an initially empty object, and on your first loop, add a key value pair of the shape and the render function that is returned from the import. Then on subsequent loops, check to see if a render object already exists, and if so, use it. Otherwise create another key value pair. This was a very useful video for me. I knew how to do this with the require syntax in node.js, but had no idea you could do this for module imports. I think I tried once, but it didn’t work cuz I treated it like a synchronous operation when in fact it returned a promise. Very cool stuff bro, keep it up! 🥳✨

[@Vibestr]

would you mind writing out an example of this please?

[@GNXClone]

The first time it's imported, it's in memory and stays resident. Subsequent imports of the same JS file are practically no-ops.

[@jasurmusaev7234]

thank you

[@lasithadulshan7357]

Shot & Sweet

[@raye3007]

謝謝分享！！

[@7heMech]

Thanks.

[@abhilashmund]

Wow that’s awesome

[@m12652]

Nice!

[@vhawkins8289]

This is cool. 😎 Currently, are the files downloaded each time the code is run?

[@imsarvesh_]

Why this channel doesn’t have 1M subscribers?

[@aziaev]

nice and useful

[@oldclient]

Good stuff

[@matheussoares1138]

thanks

[@shaikshavalisyed2012]

One of the best features of js.

[@franciscod5987]

Hi Kyle I had a question about the last example, so when you go through the forEach loop you run the ‘import’ function for every item in the array, does that mean you RE-import the files every time?

[@me_manish_prajapati]

I think, once the file is downloaded it will use downloaded code only. So it'll check whether do we have that file or not. ( Same as React lazy loading works )

[@kirayatail]

Hey, I learned something today. Have a like!

[@Sagarclips]

One drawback of dynamic import is that Tree shaking is not possible so if you are loading big module, bundler will load all exports from the module. But yes we can eliminate loading of unnecessary modules. That's a big benefit.

[@shubhamlatiyan7972]

11:14, async await will not work in foreach loop

[@techtonight882]

Two questions: 1. Wouldn't rectangle.js imported twice now? 2. Since we made forEach function async, and triangle.js is a significantly larger file from rectangle.js, then wouldnt it render rectangle and triangle out of order?

[@GNXClone]

Wow! Nice! "This is going to save us time, memory and space" I'm curious to know what the difference is between memory and space. I've always considered memory === space.

[@uahnbu]

Hey, your video really broaden your knowledge. Still, I've some wondering. What if I want to create a new instance of the imported Class, e.g. import { MyClass } from 'lib.js'; const obj = new MyClass(); and the constructor takes quite a little time. Is it beneficial to use dynamic import in this case, will some time to be spent to create the new obj every time the function is called?

[@HELIOSsanta]

Hello my dear how You doing? Man You did a great job thanks so much your thought change Me a lot thanks so much.

[@HaNaxHeart]

amazing

[@me_manish_prajapati]

Some questions: Should we use this in react-redux? For actions and dispatch It'll download the whole file and then by destructuring we will pick one method, so is there any method where we can download one method from .js file? Thanks, Kyle, You always know what we need to know about the Web.

[@monireol]

Awesome

[@franciscojunior3138]

Nice.

[@INAVACL]

AMAZING

[@bryanenid1228]

What is the advantages of using this than using require() ? Just the async?

[@annguyenhoangphu451]

I have a question that when we use multiple time the dynamic import of the same is file, do the browser will download every single time or just one time and save in memory?

[@fabaladibbasey7453]

Nice one

[@kalokal5812]

I'm torn between feeling like this is amazing for performance and getting rid of 50 lines of imports at the top of all my files and it making the code itself less readable... Also how well does this work with automatically updating imports (e.g. in VSCode when you change file names)?

[@Vipers992]

Honestly if I did these dynamic imports in any corporate codebase with 30+ engineers collaborating on it, people will really think i'm just being pretentious and not sticking with the format. All the files get bundled anyway.

[@NgocNamNguyenHcm]

10:33 in this last example, does this code load/import 3 times, in stead of 2 times according to the original code?

[@duffscs]

Probably not thanks to browser caching

[@WebDevSimplified]

It should only load twice. Since the second time it fetches the file it is already downloaded it will just use the downloaded version.

[@NgocNamNguyenHcm]

@@WebDevSimplified thank you 😊

[@uahnbu]

If you include IIFE functions in the lib, such as console.log, varA++, etc, when you import it multiple times, these IIFE functions will only be called once, due to the behavior of caching.

[@legionsra]

@@WebDevSimplified I just checked this, and it is kept in memory, like when you add < script type="module" > to a page. There will be no more networks calls, not even for the cached version, if you refresh the page, then you will get the cached (or from service workers) if headers allows so, and then back to - only memory - usage.

[@the_BetaDev]

In the last case, will it import every time the loop runs? like we run render rectangle twice so will it import that twice because it's in a loop?

[@JayGanatra]

Like, we can use this for datatables, to first load the page before loading the data?

[@karolsyta1742]

Can I use async/await with default import name as in translations example? Where to put try .. catch then?

[@hnccox]

Me showing up to my boss: "I created a render engine for different shapes" The render engine:

[@xAxtroz]

Curious, are you using Promise.then((args) => { console.log(args) }) instead of Promise.then(console.dir) out of habit, to be explicit or for another reason? Mind sharing your thoughts? I'm talking in a scenario where you just want to dump something in the console.

[@larsdaemon6104]

awesome

[@iamwilly8223]

Hi, sorry for my bad English, I'm Spanish. Does anyone know a book to learn Javascript using good practices? For Frontend and Backend, I really want to learn more about Vue Js and Node Js

[@sky78710]

Can you explain that with using webpack jsnop bundles so that selection bundle dynamically. Please.

[@trusterzero6399]

Does this automatically cache or do we need to take care of that manually?

[@CodingEd]

Nice video, but here the question, is this method work with fw like vue?

[@dave6012]

Kyle this is such a cool idea! Is it possible to implement this with a react app aka something that is bundled with webpack? Sounds like maybe not since it has to compile everything anyway 🤔

[@doc8527]

it's ready existed for a while. As far as I know, Next.js has dynamic import that does advanced jobs like this, which is essentially from the idea of React.Lazy (reactjs.org/docs/code-splitting.html#reactlazy). As I skim through the comment section, it's unfortunate that a lot of Devs had no idea the library they are using daily especially React. Vue and Angular probably need to do some extra research to confirm this feature, but I pretty sure they existed here and there.