Learn Performance - Render Blocking JavaScript

module - import

Modules are also able to import other modules using ES6 import / export syntax. For example, import { sleep } from "./sleep.js". While this allows you to keep your files modular, imported files are not discoverable by the preload-scanner and can slow down your overall load time as the browser needs to make a fetch request for each file.

This demo imports a JavaScript module using <script src="/module-import.js" type="module"></script>. This module then imports sleep.js.

WebPageTest waterfall chart showing four resources. The Start Render mark appears at 2.2s.

In the waterfall above, sleep.js only begins downloading after module-import.js has finished downloading and parsing. While this does not affect your Start Render, JavaScript begins executing later as it needs to wait for all modules to finish importing.

View Source Code 
// index.html
<head>
  <link rel="stylesheet" href="/style.css">
  <script src="/module-import.js" type="module"></script>
</head>

// module-import.js
import { sleep } from "./sleep.js";

// simulate CPU-intensive JavaScript execution
sleep(2000);
console.log("Hello world!");