了解 JavaScript 的這個新功能
直到最近，我才有幸使用動態匯入，當時我在一個 Next.js 應用程式中使用它們來分割程式碼，並且我必須進行一些研究，因為它們與靜態匯入有些不同。
一個 ES 模組的靜態匯入（預設匯出）的寫法如下：
import moment from 'moment'
你可以使用物件解構的方式來取得命名匯出：
import { format } from 'date-fns'
靜態匯入有一些限制：
- 它們限制在檔案的頂層
- 它們不能在條件判斷（if）內被載入
- 套件名稱無法在執行時決定
動態匯入可以做到所有這些事情！
它們的語法略有不同。
並且它們可以在模組內使用。
使用方式如下：
const module = await import('module')
而要使用預設匯出，則必須先呼叫 .default()。
以 moment 為例的範例：
const moment = (await import('moment')).default()
相反地，命名匯入的使用方式與預期相同：
const { format } = await import('date-fns')