JavaScript動態導入

了解即將推出的JavaScript新功能

我從未有過使用的特權動態進口直到最近,當我使用它們在Next.js應用程序中增強代碼拆分功能時,我還需要做一些研究,因為它們與靜態導入

靜態導入ES模塊默認導出看起來像這樣:

import moment from 'moment'

您可以使用對象分解來獲取命名的導出:

import { format } from 'date-fns'

靜態導入有一些限制:

  • 它們僅限於文件的頂層
  • 它們不能有條件地加載(在if
  • 包的名稱無法在執行時確定

動態導入可以完成所有這些事情!

語法略有不同。

他們工作在模塊內

您可以這樣使用它們:

const module = await import('module')

並使用默認導出,您必須先調用.default()

使用矩的示例:

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

另一方面,命名的進口按預期方式工作:

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

您今天可以使用它們嗎?是的!這瀏覽器支持已經很不錯了,還有一個Babel插件

免費下載我的JavaScript初學者手冊


更多js教程: