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教程: