与表达式一起使用时，webpack 中的动态导入如何工作? [英] How does Dynamic Import in webpack works when used with an expression?
问题描述
当你使用这样的东西时，捆绑是如何发生的:const module = import(`folder1/${someExpression}`);
我的意思是，当你向它传递一个纯字符串时，我确实理解，但是 webpack 如何理解所有可能的结果?
这是一个好模式吗?
它是否捆绑了该文件夹中的所有文件?
如果是这样，它将它们全部捆绑在一起并递归执行?
How does the bundling happens when you use something like this:
const module = import(`folder1/${someExpression}`);
I mean, I do understand when you pass a plain string to it, but how does webpack understands all the possible outcomes?
Is this a good pattern?
Does it bundle all the files from that folder?
If so, it bundles them all together and does it recursively?
推荐答案
所以，我遇到了这个 问题 让我知道它是如何工作的以及要搜索什么.我在这里发帖是为了帮助其他人.
这里的关键是使用魔法评论.来自文档:
So, I bumped into this question that gave me an idea on how it works and what to search for. I am posting here so it can help someone else.
The key here is to use Magic Comments. From the the docs:
内嵌注释以使功能正常工作.通过在导入中添加注释，我们可以执行诸如命名块或选择不同模式等操作.
Inline comments to make features work. By adding comments to the import, we can do things such as name our chunk or select different modes.
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 将被拒绝.永远不会执行网络请求.当所需的块始终在初始请求中手动提供(嵌入页面中)时，这对于通用渲染很有用，但在应用导航将触发最初未提供的导入的情况下则不然.
- 'lazy' (default): Generates a lazy-loadable chunk for each import()ed module.
- 'lazy-once': Generates a single lazy-loadable chunk that can satisfy all calls to import(). The chunk will be fetched on the first call to import(), and subsequent calls to import() will use the same network response. Note that this only makes sense in the case of a partially dynamic statement, e.g. import(
./locales/${language}.json), where multiple module paths that can potentially be requested. - 'eager': Generates no extra chunk. All modules are included in the current chunk and no additional network requests are made. A Promise is still returned but is already resolved. In contrast to a static import, the module isn't executed until the call to import() is made.
- 'weak': Tries to load the module if the module function has already been loaded in some other way (e.g. another chunk imported it or a script containing the module was loaded). A Promise is still returned, but only successfully resolves if the chunks are already on the client. If the module is not available, the Promise is rejected. A network request will never be performed. This is useful for universal rendering when required chunks are always manually served in initial requests (embedded within the page), but not in cases where app navigation will trigger an import not initially served.
您还可以结合使用其他魔术注释，例如:
You can also make use of combinations with other magic comments, such as:
/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data", webpackPrefetch: true */,- 将所有可能的资源打包成一个包，命名为all-i18n-data，并在父模块加载后指示浏览器在空闲时间预取
/* webpackMode: "lazy-once", webpackChunkName: "all-i18n-data", webpackPrefetch: true */,- will bundle all the possible assets in one bundle, name it as all-i18n-data and will instruct the browser to prefetch in idle time after the parent module is loaded
- 将所有可能的资产捆绑在单独的捆绑包中，将它们命名为您的请求字符串，并在请求父模块时请求它.
希望能帮到你！更深入一些:
I hope it helps! For something a little more in depth:
这篇关于与表达式一起使用时，webpack 中的动态导入如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
