Learn Dynamic Module Imports In 11 Minutes

[@oussamakhalfi1751]

this channel + fireship made my brain bigger

[@mohammadsiddiq6056]

Agreeeeeeeed

[@CybercoderNaj]

So fucking trueeee

[@divinsmathew]

+ Kevin Powell as well!

[@bonleofen]

What? Isn't fireship a troll channel?

[@atreysinainadkarni5453]

Hear hear.

[@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.

[@grmancool]

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

[@CybercoderNaj]

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.

[@CybercoderNaj]

@@MomoCoder weird*

[@MomoCoder]

@@CybercoderNaj thanks

[@amittraspal]

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

[@Alessandro-nq3tm]

Dynamic import + async await = perfection :)

[@davzmore3623]

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

[@anticsBack]

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

[@habibishuta4896]

best Programming channel on youtube ♥️♥️♥️

[@ShivamJha00]

Best web development channel*

[@jimzhang32]

My guy Kyle is always productive!

[@helgaludwig793]

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

[@johnnydriesen7575]

Nice, clear and usefull examples. Thanks Kyle !

[@ErickPereziChido]

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

[@alfiartya23]

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

[@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.

[@BsiennKhan]

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

[@oluwaseunismaila8522]

Your tutorials are simply amazing. Confusing concepts clearly explained.

[@dinesh08ification]

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

[@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)

[@ChrisAthanas]

Always clear and no fluff Props

[@MrQVeeBoo]

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

[@techhype3453]

super teaching style great explanation

[@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.

[@JackBrunsion]

Great explanation and demonstration!

[@achtube85]

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

[@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.

[@erikuriegas97243]

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

[@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.

[@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.

[@ThugLifeModafocah]

Very good tips indeed. Thanks.

[@shubhamlatiyan7972]

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

[@sudarshanprajapati9742]

This video is really valuable for me. Thanks

[@ArKy326]

Always learning new with js tnx mr. Kyle!

[@Aaronmoreno]

you're the best kyle!

[@Musikur]

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

[@infinitepurelive]

Awesome content as always

[@PierreSoubourou]

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

[@raghunathvadlakonda810]

Really Really Worth it. @Kyle you are awesome.

[@mrarsenal10vn]

Thanks, Kyle. Really useful

[@LeoPlaw]

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

[@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.

[@amithbhagat]

Thank you Kyle, it is really helpful.

[@HumbertoRincon]

Useful use cases, thanks Kyle

[@sreeragmmundayadan6057]

Really helpful 👍

[@imsarvesh_]

Why this channel doesn’t have 1M subscribers?

[@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 )

[@avneet12284]

This was truly great

[@habibishuta4896]

love your content man

[@willyhorizont8672]

thanks you're really helpful

[@abhijiths148]

Excellent topic... Thanks 👍

[@ManuelLopera]

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

[@agoodcode]

Great content as always 👍🏻👍🏻👍🏻

[@tanaseadrian8305]

awesome tutorial

[@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.

[@sean9829]

Wow. Didn’t know about this one. Thanks

[@stanislavmalyshev5209]

Good job!

[@hnccox]

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

[@haoranxu4465]

This is so useful☺️!

[@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.

[@DisturbedNeo]

Only one note, and that's just that the abbreviation for Spanish is "es", as in "España", not "sp"

[@oah8465]

fantastic video, but what does the default: in ==> .then(({default:User,printUser})=>{}) do, if I remove it i get an error. Why type of operation is it doing? (appears at 03:42)

[@bryanenid1228]

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

[@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?

[@jhandgreat7079]

Thanks bro!

[@lasithadulshan7357]

Shot & Sweet

[@kirayatail]

Hey, I learned something today. Have a like!

[@vhawkins8289]

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

[@Biersasam]

10:39 correct me if I am misunderstanding, but if we use a forEach and have duplicate shape types. Won't this code import the same script multiple times?

[@SRG-Learn-Code]

yeah, what about that... probably it got cached, but is this something to avoid?

[@pokefan2711]

{default: User, printUser} Shit I didnt know this existed. I already used a lot of destructurings, but not this. Thanks!

[@khoaiviet7436]

Thank you. This very helpful

[@hiroyukinumaguchi1984]

Thank you!!

[@Lahiru_Udana]

awesome. thanks

[@CybercoderNaj]

Are there any use cases for dynamic importing in React or Vue?

[@the_BetaDev]

Maybe in importing a component dynamically only in case you need to use it

[@kirponomarenko]

Lazy loading. User scrolls page and only then component loads. Probably good for landings.

[@muhamedkaric4247]

In the last example if we have 100 rectangles in the array it will load the file with render function each time, that costs ? Also if we use import in a function that is called so many times with same parameters than we have bad decision. We should be very careful with dynamic loading. Translation files are the best example when to use dynamic loading.

[@igorswies5913]

I think there is caching so that one file only gets imported once but I might be incorrect when dealing with dynamic imports

[@shaikshavalisyed2012]

One of the best features of js.

[@RadiGamer]

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

[@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?

[@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.

[@eli-shulga]

Cool, two questions: 1. what about real life apps were you have a bundled code... So if you have only 1 bundle file (yea thats not good but is the reality with a lot of apps) then you will still have to import the js file.. so what does the dynamic import saves? The run time memory? 2. Wont this effect on run time performance? Now that you import in run time, you will have to perform the import with the action itself which should decreases runtime performance, so in essence you are trading loading performance for run time performance right? Also would be nice to see your take on splitting a 1 bundle app to 2 bundles when the second loads dynamically as shown here but with the full flow going back to importing the bundle from the server/cdn Great stuff Thanks

[@m0hammedimran]

I love your videos. But please increase the volume. I was wondering if my speaker was working

[@nightcoder5k]

Good stuff

[@md.asifal-mahmud5952]

Thanks a lot

[@m12652]

Nice!

[@sky78710]

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

[@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?

[@karolsyta1742]

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

[@madhavmadhusoodanan1877]

Yaaayyyy i got in within the first 1k views I feel blessed :)

[@7heMech]

Thanks.

[@DuyTran-ss4lu]

Awesome!

[@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.

[@SamareshMaity231]

thank you

[@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?

[@abhilashmund]

Wow that’s awesome

[@CodingEd]

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

[@jenstornell]

In the last example you are importing two files that are the same. Will it be loaded twice or one time and then cached?

[@fabaladibbasey7453]

Nice one

[@trinhle7227]

3:09 anyone can tell me how to do that. thanks

[@Asty__]

How different would dynamic module imports would be in Node.js? Can we use the same Promise method inside of a function with the "require" syntax?

[@mzaini30]

Set up your project as ESM. Add "type": "module" in package.json

[@aziaev]

nice and useful

[@monireol]

Awesome

[@suryapratapsingh5149]

Hi, Please give some videos on Web Components/shadow DOM.