動態import()引入了一種新的類似功能的形式，import與靜態相比，可以解鎖新功能import。本文對這兩者進行了比較，並概述了新的內容。
靜態import（概述）
模塊./utils.mjs
// Default export
export default () => {
console.log('Hi from the default export!');
};
// Named export `doStuff`
export const doStuff = () => {
console.log('Doing stuff…');
};靜態導入使用./utils.mjs模塊的方法
<script type="module">
import * as module from './utils.mjs';
module.default();
// → logs 'Hi from the default export!'
module.doStuff();
// → logs 'Doing stuff…'
</script>這種用於導入模塊的語法形式是一個靜態聲明：它只接受一個字符串文字作為模塊說明符，並通過運行前“鏈接”過程將綁定引入本地作用域。靜態import語法只能在文件的頂層使用。
動態import()
Dynamic import()引入了一種新的類似函數的形式，import以滿足這些用例。import(moduleSpecifier)返回所請求模塊的模塊名稱空間對象的承諾，該承諾是在獲取，實例化和評估所有模塊的依賴項以及模塊本身之後創建的。
以下是動態導入和使用./utils.mjs模塊的方法：
<script type="module">
const moduleSpecifier = './utils.mjs';
import(moduleSpecifier)
.then((module) => {
module.default();
// → logs 'Hi from the default export!'
module.doStuff();
// → logs 'Doing stuff…'
});
</script>由於import()返回一個promise，因此可以使用async/ await而不是then基於-based的回調樣式：
<script type="module">
(async () => {
const moduleSpecifier = './utils.mjs';
const module = await import(moduleSpecifier)
module.default();
// → logs 'Hi from the default export!'
module.doStuff();
// → logs 'Doing stuff…'
})();
</script>注意：雖然import() 看起來像一個函數調用，但它被指定為恰好使用括號的語法（類似於super()）。這意味著import不會繼承，Function.prototype所以你不能call或apply它，以及像const importAlias = import不工作的東西- 哎呀，import甚至不是一個對象！但這在實踐中並不重要。
下面是一個示例，說明動態如何import()在小型單頁面應用程序中啟用延遲加載模塊：
```
<meta charset="utf-8"></meta>
<title>My library</title>
<nav>
<a data-entry-module="books" href="books.html">Books</a>
<a data-entry-module="movies" href="movies.html">Movies</a>
<a data-entry-module="video-games" href="video-games.html">Video Games</a>
</nav>
<main>This is a placeholder for the content that will be loaded on-demand.</main>
<script>
const main = document.querySelector('main');
const links = document.querySelectorAll('nav > a');
for (const link of links) {
link.addEventListener('click', async (event) => {
event.preventDefault();
try {
const module = await import(/${link.dataset.entryModule}.mjs</script>
```);
// The module exports a function named ```
loadPageInto
```.
module.loadPageInto(main);
} catch (error) {
main.textContent = error.message;
}
});
}import()正確應用時，動態啟用的延遲加載功能非常強大。注意：如果您的應用程序從其他域（靜態或動態）導入腳本，則需要使用有效的CORS標頭（例如Access-Control-Allow-Origin: *）返回腳本。這是因為與常規腳本不同，模塊腳本（及其導入）是使用CORS獲取的。
建議
靜態import和動態import都很有用。每個都有自己的，非常獨特的用例。使用static imports作為初始繪製依賴性，尤其是對於首屏內容。在其他情況下，請考慮使用動態按需加載依賴項import()。
動態import()支持
文章來源 Dynamic import()