動態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()在小型單頁面應用程序中啟用延遲加載模塊:

<!DOCTYPE html>
<meta charset="utf-8">
<title>My library</title>
<nav>
<a href="/ucamc/books.html" data-entry-module="books">Books</a>
<a href="/ucamc/movies.html" data-entry-module="movies">Movies</a>
<a href="/ucamc/video-games.html" data-entry-module="video-games">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`);
            // The module exports a function named `loadPageInto`.
            module.loadPageInto(main);
        } catch (error) {
            main.textContent = error.message;
        }
        });
    }
</script>

import()正確應用時,動態啟用的延遲加載功能非常強大。注意:如果您的應用程序從其他域(靜態或動態)導入腳本,則需要使用有效的CORS標頭(例如Access-Control-Allow-Origin: *)返回腳本。這是因為與常規腳本不同,模塊腳本(及其導入)是使用CORS獲取的。

建議

靜態import動態import都很有用。每個都有自己的,非常獨特的用例。使用static imports作為初始繪製依賴性,尤其是對於首屏內容。在其他情況下,請考慮使用動態按需加載依賴項import()。

動態import()支持

動態import()支持

關於此功能支持列表

文章來源 Dynamic import()

您也可能喜歡這些文章