The power of dynamic imports

This article was originally posted in, go there for a better reading experience.
Dynamic imports are great, they’ve been out there for a while and presume many improvements in the way we treat modules/components. In this article, I’m going to be explaining how they work, why they’re so good and some of the things we could accomplish by using them.
If you read my previous article about factory pattern in javascript you probably know already that there are some good ways of creating instances dynamically in javascript, BUT, this does not mean that the other objects imported (the not instantiated ones) will not be added to our initial bundle as well, because, after all, we’re importing all the objects, the only difference as I said is that they’re dynamically instantiated. What if I tell you that we could actually import the content of the modules dynamically and include it later when we need it?

Introducing Dynamic imports

The Dynamic import() is a javascript proposal currently on stage 3, as we know ECMAScript modules are static but thanks to this proposal they don’t always have to be, in a nutshell, the dynamic import() syntax allows us to load modules on demand by using promises or the async/await syntax, an example/implementation for this would be:
import(‘./Module’).then(Module => Module.method());

Now, imagine the applications in your site with components like modals, tooltips, technologies such as SPA’s and in libraries like React, we could do many things:

Components/Modules Prefetching
Loading code on demand (Lazyloading)
Conditional loading without having to include unused code.

The evident impact of dynamic imports is found in the reduction of our bundle’s sizes, the size/payload response of our requests and overall improvements in the user experience especially on SPA’s when prefetching code.

Implementation using React and async/await

Imagine you have a component that could be lazy-loaded or fetched on a certain event (click), this component would need to be added into our app dynamically and will need to make use of a structure that allows us to update our react app in response to a change, I know, what a better structure than React’s state?, it allows us to make dynamic changes in our app and more so let’s go ahead and use it.
I’ll basically make a very simple implementation that adds the link to our Github in the header dynamically when clicking a div.
First let’s start creating a very dumb component that only renders the Github link in the menu, let’s call it DynamicComponent.js, the code for it is:
import React from ‘react’;
import { GitHub } from ‘components/Icons/SocialIcons’;

const DynamicComponent = () => (