While working with JavaScript projects, as your project will grow, it will become very much a necessity to distribute your code into multiple files i.e. do some logical grouping by functionalities. When we are doing that, we are basically creating "modules". A module is basically a JavaScript file that can contain classes, variables, or functions that are logically related.
In this series of two blog posts, I will be focusing on basic concepts of import/export from/in a module, some considerations, and dynamic importing.
In the first post, I have explained how the module works in JavaScript. If you have not read the post yet, I would request you to read the post and understand the basic concept first. You can read the post here and watch the video here.
Note - I am sharing all my JavaScript Developer Certification study notes here. Please provide your feedback if you see anything wrong or missing. Appreciate.
In the second post, I will be discussing -
- Why do we need dynamic importing?
- Syntax of dynamic importing
- Examples
Why do we need dynamic importing?
JavaScript standard import is very much static i.e. standard import will always evaluate all the imported modules at the run time, which is not very efficient. Rather we should evaluate imported modules only when it is really needed.
Loading modules statically is having a performance impact as it slows the loading of the code significantly and increases the program's memory usage.
Due to mainly these reasons, it is highly recommended to go for dynamic importing and evaluating of the modules only when it is really needed.
Syntax of dynamic importing?
To dynamically import a module, we need to use import keyword as a function. When used as a function, this will return a promise. And since it returns a promise, it is possible to use async-wait instead of then-based callback style. Don't worry, I will share examples later in this post to explain this. Below is the syntax of dynamic importing where I have used import as a function that returned a promise.
import("/modules/MYMODULE.js").then((module) => {
//Operation
});
Examples
Let's say I have a module named "operations.js" where I have a basic add function and I am exporting that function.
// * File Name: operations.js
function add(num1, num2) {
return num1 + num2;
}
export { add };
Now I would like to create the HTML page with a button and while clicking the button only, I would like import this above module and do the add operation. Try to understand the difference, here I am not importing the module at the very first time, rather I would like to import only when the button is clicked i.e. dynamically importing the module.
Here is the HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Working with Modules - Dynamic Importing</h1>
<script type="module" src="Modules/Modules-1.js"></script>
<button id="myButton">Click me</button>
</body>
</html>
Here is the dynamic import code
const btn = document.getElementById("myButton");
btn.addEventListener("click", buttonClicked);
function buttonClicked() {
console.log("Button Clicked");
import("./operations.js").then((module) => {
let addResult = module.add(10, 15);
console.log(addResult);
});
}
Now when the button will be clicked, then only the module operations.js will be imported. This is dynamic importing. As I mentioned already, dynamic importing returns a promise, so here I have used then-based callback style to call the add function from the module.
The same dynamic importing can be written using async/await instead of the then-based callback style. If that is your preferred style, the above code will look something like this -
const btn = document.getElementById("myButton");
btn.addEventListener("click", async () => {
const module = await import("./operations.js");
let addResult = module.add(10, 15);
console.log(addResult);
});
I hope these two posts will help you to understand how "Import/Export Modules work in JavaScript".
0 Comments