DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for JavaScript Import Strategies for Performance Optimization⚑
nuko_suke
nuko_suke

Posted on

JavaScript Import Strategies for Performance Optimization⚑

Modern JavaScript like ES Modules supports import statement.

import sendAnalyticsData from 'sendAnalyticsData';
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout πŸ˜†