Sourabh Kheraliya
Code splitting in your vanillaJS app

Code splitting in your vanillaJS app

Sourabh Kheraliya's photo
Sourabh Kheraliya
·

4 min read

ES6 introduced a way to easily share code among multiple javascript files. This involves -

  • Exporting parts of a javascript file for use in other one or more javascript files.
  • Importing the parts you need in your javascript file from other javascript files.

In order to take advantage of this functionality, we need to create a script in our HTML document with a type of module

<script src="script.js" type="module"></script>

A script that uses this module type can now use the import and export features.

Use export to share a block of code

A common way to export a single function is by placing an export keyword in front of a function as shown below. 

export const add = (numOne, numTwo) => {
  return numOne + numTwo;
}

The same thing can be achieved like this (using export statement):-

const add = (numOne, numTwo) => {
  return numOne + numTwo;
}

export {add};

we can export multiple things by placing the export keyword in front of an identifier as shown in the first example or placing everything in an export statement like the second example.

Reuse javascript code using import

Import allows us to choose which part of a javascript file to load.

let's try to understand this by importing our previously exported add function which is present in functions.js file.

import {add} from "./functions.js";

as you can see, in the above example we are importing add function from functions.js file.

after importing add function, we can call and use it like any other function as shown below. 

import {add} from "./functions.js";

const sum = add(5, 10);

console.log(sum);
// output -> 15

🚨 Things to notice

The name of the item you want to import should be the same in both the file from where the item is exported and in the import statement's curly braces { }.

Importing more than one item from a file

To import more than one item from a file, just add the name of the identifier in the curly braces of the import statement as shown below. 

import {add, subtract, multiply, divide} from "./functions.js";

Importing everything from a file

We can import all the exported items of a file using the * as syntax in the import statement.

let's try to understand this with the help of an example. 

import * as functionCollection from "./functions.js";

In the above example, we are importing all the exported items from " functions.js " file and storing them in a object which is named as functionCollection.

The above import statement will create an object called functionCollection and this object will contain all of the exported items of functions.js file in it.

🚨 Things to notice : "functionCollection" is just a variable name, we can name it anything.

After importing, we can access all the exported items of the functions.js file just like accessing any other object property by using dot notation or by using square bracket notation as shown below

import * as functionCollection from "./functions.js";

const sum = functionCollection.add(5, 10);
console.log(sum);
// output -> 15

const diff = functionCollection.subtract(5, 10);
console.log(diff);
// output -> -5

console.log(functionCollection);
/*
--OUTPUT--
{ 
  add: [Function],
  divide: [Function],
  multiply: [Function],
  subtract: [Function] 
}
*/

Export default

So far the method we are using for exporting items of a file is known as Named Export. This allowed us to make multiple functions and variables available for us to use in other files.

There is another export syntax known as export default. Usually, this syntax is used when only one item is being exported from a file.

It is also used to create a fallback value for a file or module.

for example -

// Named function
export default function add(numOne, numTwo){
  return numOne + numTwo;
}

// Anonymous function
export default function(numOne, numTwo){
  return numOne + numTwo;
}

🚨 Things to notice

  • We can only have one value be a default export in each file or module because export default is used to declare a fallback value for a file or module.
  • We cannot use export default with var, let and const.

Importing a default export

import add from "./function.js"
  • The syntax differs in one place i.e the imported value add is not surrounded by curly braces { }.
  • add here is simply a variable name for whatever the default export of function.js file is.
  • We can use any name when importing default but it's good practice to use a variable name that is easy to identify or something that defines its containing value.
ES6best practices