/

JavaScript 動態匯入

JavaScript 動態匯入

了解 JavaScript 的這個新功能

直到最近，我才有幸使用動態匯入，當時我在一個 Next.js 應用程式中使用它們來分割程式碼，並且我必須進行一些研究，因為它們與靜態匯入有些不同。

一個 ES 模組的靜態匯入（預設匯出）的寫法如下：

1
import moment from 'moment'

你可以使用物件解構的方式來取得命名匯出：

1
import { format } from 'date-fns'

靜態匯入有一些限制：

  • 它們限制在檔案的頂層
  • 它們不能在條件判斷（if）內被載入
  • 套件名稱無法在執行時決定

動態匯入可以做到所有這些事情！

它們的語法略有不同。

並且它們可以在模組內使用。

使用方式如下：

1
const module = await import('module')

而要使用預設匯出，則必須先呼叫 .default()。

以 moment 為例的範例：

1
const moment = (await import('moment')).default()

相反地，命名匯入的使用方式與預期相同：

1
const { format } = await import('date-fns')

你能夠立即使用它們嗎？可以！瀏覽器支援已經相當不錯，並且還有一個Babel 插件可用。

tags: [“JavaScript”, “dynamic imports”, “ES modules”, “code splitting”, “Babel plugin”]