JavaScript Import Strategies for Performance Optimization⚡

Modern JavaScript like ES Modules supports import statement.

import sendAnalyticsData from 'sendAnalyticsData';

It helps you to optimize your website performance.
Let's see about the import strategies to improve your site!!

Mainly, there are 2 import strategies.

1. Import when the page starts loading
2. Import when the module is needed

1. Import when the page starts loading

Normally, you use import as below.

import sendAnalyticsData from 'sendAnalyticsData';

const button = document.getElementById('button');
button.addEventListener('click', () => {
  // send analytics data externally when the user clicks
  sendAnalyticsData();
});

When you build your application using the bundler like webpack, sendAnalyticsData is bundled into JavaScript files which are loaded initially in the browser.

In this example, it is a problem that the page loads a bit slowly because the JavaScript files include the unnecessary module.

The solution is to load sendAnalyticsData when it is needed.

2. Import when the module is needed

You can also use dynamic import .

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const { default: sendAnalyticsData } = await import('sendAnalyticsData');
  sendAnalyticsData();
});

sendAnalyticsData is not bundled into JavaScript files which is loaded initially in the browser.

The browser will fetch the JavaScript file which has sendAnalyticsData and load it asynchronously when the user clicks.

However, we still have the problem (especially if you use the module which updates UI) that the page responds a bit slowly to an interaction because the module is loaded only after the user clicks.

Are there other import strategies?

There are some solutions such as using setTimeout .

One of them I suggest is to use idle-task which wraps requestIdleCallback .

https://github.com/hiroki0525/idle-task

import { setIdleTask, waitForIdleTask } from 'idle-task';

const taskId = setIdleTask(() => import('sendAnalyticsData'))

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const { default: sendAnalyticsData } = await waitForIdleTask(taskId);
  sendAnalyticsData();
});

sendAnalyticsData is loaded during a browser's idle periods.

The page can respond quickly to an interaction if it has been loaded.

But does page respond more slowly if the browser don't have idle periods?

I change the example like as follows.

import { setIdleTask, forceRunIdleTask } from 'idle-task';

const taskId = setIdleTask(() => import('sendAnalyticsData'))

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  // use forceRunIdleTask
  const { default: sendAnalyticsData } = await forceRunIdleTask(taskId);
  sendAnalyticsData();
});

forceRunIdleTask executes importing the module immediately even if the browser don't have idle periods.

If you want to load the important module like changing UI, you should use forceRunIdleTask, otherwise use waitForIdleTask
which waits for importing module when the browser is idle.

For more details, please see https://github.com/hiroki0525/idle-task .

Conclusion

I introduced you to some import strategies for performance optimization and I recommend to use idle-task .

Thank you for reading this article!