JavaScript Import Strategies for Performance Optimization⚡
Tags: javascript, webdev, programming, opensource
Published: 2022-11-29 10:27:44

Modern JavaScript like ES Modules supports `import` statement.

```javascript
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.

```javascript
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](https://webpack.js.org/), `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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) .

```javascript
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://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) .

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

```javascript
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.

```javascript
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`](https://github.com/hiroki0525/idle-task) .

Thank you for reading this article!