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

Question

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

Answer 1

所以，我遇到了这个question，它让我了解了它的工作原理和搜索内容。我在这里发帖是为了帮助其他人。
这里的关键是使用Magic Comments。来自docs：

内联 cmets 使功能工作。通过将 cmets 添加到导入中，我们可以做一些事情，例如命名我们的块或选择不同的模式。

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 被拒绝。永远不会执行网络请求。当所需的块总是在初始请求中手动提供（嵌入在页面中）时，这对于通用渲染很有用，但在应用导航将触发最初未提供的导入的情况下则不然。

您还可以使用与其他魔法 cmet 的组合，例如：

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

希望对你有帮助！ 对于一些更深入的东西：

1. the stackoverflow question mentioned above
2. https://github.com/webpack/webpack/issues/4807
3. documentation for the dynamic imports and Magic Comments
4. code splitting, pre-fetching and pre-loading