Fast JavaScript: Dynamic imports

For having a clean code in JavaScript, you must use multiple modules which are imported from one to another. But some of the functions are not required exactly when you import them. Some of them will not see the light of the browser because, in some cases, the information doesn't fulfill the condition for them to be called.

That's why JavaScript created dynamic imports. With it, you can import a function exactly when it has to be called. This way you will improve the app performance and reduce the memory usage.

So, let's see how dynamic imports looks like.

We have this lines of code. A user which contain a name and a role, based on the role, we call the setCookie function or not.

Because, we may not need to call setCookie function, we can use the dynamic imports. This way, it will be imported only if the user role is "visitor".

The code will look like this:

In this case, the import is on the if block. This way, if the setCookie will not be needed, the module will not download it and that's how the dynamic imports improve your performance of the code.

Since the dynamic import return is a promise, we can also use the async function, but this is the only place where I prefer to use the then block instead of async/await. But this is my opinion. :)

Let's say that we have an onClick event, and because its function is huge and can be splitted in three, based on the role of the user, we created three modules that contain: handleClickVisitator, handleClickContentCreator and handleClickAdmin.

I know this is not the best case or the best approach without dynamic imports, but focus on the idea. :))

The code would look like this:

In this example, we will inevitably import and download all 3 modules, even if we only use one of the function and this way.

Now, let's check the case where we use the dynamic import.

First at all, we can see how clean the code is and that we can now rename all the functions from the modules handleClick, which is better in my opinion. :))

But this is nothing compared with the improvement of the performance and the decreased memory usage.

Please tell me what do you think about dynamic imports and other cases where you think it can be applied for better performance. :)

Thanks for reading my article!

Leave a like if you find this useful, so others like you can benefit from it.

You can also find my articles on my website: mariusatasiei.com/blog

Sources: YouTube and Mozilla