与表达式一起使用时，webpack 中的动态导入如何工作？

Question

当你使用这样的东西时，捆绑是如何发生的：
const module = import(`folder1/${someExpression}`);
我的意思是，当你向它传递一个普通字符串时，我确实理解，但是 webpack 如何理解所有可能的结果？
这是一个好的模式吗？
它是否捆绑了该文件夹中的所有文件？
如果是这样，它将它们全部捆绑在一起并递归执行？

Answer 1

所以，我遇到了这个问题，它让我了解了它是如何工作的以及要搜索什么。我在这里发帖是为了对其他人有所帮助。
这里的关键是使用Magic Comments。来自文档：

内嵌注释使功能发挥作用。通过向导入添加注释，我们可以执行诸如命名块或选择不同模式等操作。

webpackMode
它将告诉 webapack 如何捆绑你的资源。您将导入标记如下： import(/* webpackMode: "lazy" */`./locales/${language}.json`)

• ' lazy '（默认）：为每个 import()ed 模块生成一个可延迟加载的块。
• ' lazy-once '：生成一个可延迟加载的块，可以满足对 import() 的所有调用。该块将在第一次调用 import() 时获取，后续调用 import() 将使用相同的网络响应。请注意，这仅在部分动态语句的情况下才有意义，例如 import( ./locales/${language}.json)，其中可能会请求多个模块路径。
• ' eager '：不生成额外的块。所有模块都包含在当前块中，并且不会发出额外的网络请求。Promise 仍然被返回，但已经解决了。与静态导入相反，在调用 import() 之前模块不会被执行。
• ' weak '：如果模块函数已经以某种其他方式加载（例如另一个块导入了它或加载了包含该模块的脚本），则尝试加载模块。仍然会返回 Promise，但只有当块已经在客户端上时才能成功解析。如果模块不可用，则 Promise 被拒绝。网络请求永远不会被执行。当所需的块始终在初始请求中手动提供（嵌入页面内）时，这对于通用渲染很有用，但在应用程序导航将触发最初未提供的导入的情况下则不然。

您还可以将其与其他神奇注释结合使用，例如：

• /* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data", webpackPrefetch: true */,
  • 将所有可能的资源捆绑在一个包中，将其命名为all-i18n-data并指示浏览器在加载父模块后的空闲时间内预取
• /* webpackMode: "lazy", webpackChunkName: "[request]", webpackPreload: true */,
  • 将把所有可能的资源捆绑在单独的包中，将它们命名为请求的字符串，并在请求父模块时请求它。

我希望它有帮助！对于更深入一点的东西：

1. 上面提到的stackoverflow问题
2. https://github.com/webpack/webpack/issues/4807
3. 动态导入和 Magic Comments 的文档
4. 代码分割、预取和预加载