“require(x)”和“await import x”之间的区别

Question

这个问题可能看起来类似于“require(x)”和“import x”之间的区别，但实际上是不同的。

我注意到最近在 Next.js 项目中的使用await import，例如： https: //github.com/zeit/next.js/blob/canary/examples/with-apollo/lib/apollo.js#L134

if (ssr && AppTree) {
    // Import `@apollo/react-ssr` dynamically.
    // We don't want to have this in our client bundle.
    const { getDataFromTree } = await import('@apollo/react-ssr')
}

乍一看，我相信使用await import('@apollo/react-ssr')允许在源代码中（有条件地）使用import，而不是@apollo/react-ssr在顶层导入模块。目标是减少为浏览器生成的包（浏览器将不包含@apollo/react-ssr包）。

到目前为止，我一直习惯于const reactSSR = require('@apollo/react-ssr')有条件地导入包。我想知道这两种方式有什么区别。

也许使用await import('@apollo/react-ssr')更好，因为它允许进行树交换？与使用它相比有什么“缺点”吗require？

Answer 1

使用标准静态 ESM 导入语法的原因之一await import是导入的包在某些环境中可能不存在。使用await import语法允许try/catch导入并在抛出异常时动态调整。

例如，Node.js 可以在没有Crypto支持的情况下构建。如果环境 Node.js 版本未构建Crypto支持，则静态导入Crypto功能 ( import { randomUUID } from 'crypto';) 将引发异常。使用await import语法 ( const { randomUUID } = await import('node:crypto');) 可以捕获并处理异常。