为什么 Webpack 延迟加载会从一个文件夹中加载所有文件？答案

【问题标题】：Why Webpack lazy loading loads all files from a folder?为什么 Webpack 延迟加载会从一个文件夹中加载所有文件？
【发布时间】：2020-04-28 04:20:31
【问题描述】：

我正在尝试使用 webpack 动态导入 i18n 文件：

function getI18n(lang) {
  return import(/* webpackChunkName "i18n/[request]" */ `./locales/${lang}.json`)
  .then(/*whatever*/)
}

但即使在调用该函数之前，我也可以在开发人员工具中看到该文件夹中的所有文件都已加载：

i18n/en.json.js
i18n/ru.json.js
i18n/nl.json.js
i18n/nw.json.js

等等

这不是我想要的。 我想在运行时动态延迟加载所需的块。

有趣的是，如果我将文件重命名为 ru -> ru2 和 nw -> nw2 并将导入更改为使用编号为 2 的路径，如下所示：./locales/${lang}2.json 它只会加载文件 i18n/ru2.json.js 和 i18n/nw2.json.js 并且将忽略名称中没有 2 字符的那些。所以我猜它是用某种正则表达式而不是完全匹配来操作的。

谢谢

P.S.老实说，我使用vuejs 和typescript，所以问题可能介于两者之间。我一直在尝试使用我的代码来遵循这个示例vuei18n lazy load。

【问题讨论】：

你什么时候打电话给getI18n()
到目前为止我还没有调用它，应该在单击按钮时调用它。即使该功能从未使用过但已被导出 - 导入的东西正在发生

标签： typescript vue.js webpack vuejs2 lazy-loading

【解决方案1】：

Webpack 不知道您在运行时需要该目录中的哪个文件，因此它需要包含捆绑包中的所有文件。 (https://webpack.js.org/guides/dependency-management/#require-with-expression)

【讨论】：

好的，这是有道理的。但我不清楚 - 如何避免这种情况？或者也许应该改变整个问题：如何在运行时正确地延迟加载块？
您可以将getI18n 函数重构为类似：``` const langs = { en: () => import('./locales/ en.json'), ru: () => import('./locales/ru.json') } function getI18n(lang) { return langs[lang].then(...) } ``` 然后 webpack 会提前知道要包含在包中的文件，但它们将位于单独的块中，因此只有使用的语言会被发送到浏览器。

【解决方案2】：

答案很简单：

vue-cli 默认启用“预取”设置。（这打破了延迟加载的整个想法）

您可以在 webpack 设置中关闭 prefetch。
如果你使用“vue-cli”，你必须扩展你的vue.config.js：

chainWebpack: config => config.plugin.delete('prefetch')

希望这会有所帮助

【讨论】：

【解决方案3】：

这里禁用 vue cli prefech 是我用于本地语言的配置。也可以在 vue cli 文档https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch 中找到这个。

vue.config.js

   ...
   chainWebpack: config => {
    // remove the prefetch plugin
    // config.plugins.delete("prefetch");

    // or:
    // modify its options:
    config.plugin("prefetch").tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/lang(.)+?\.js$/);
      options[0].fileBlacklist.push(/lang(.)+?\.js.map$/);
      return options;
    });
  },
  ...

【讨论】：