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

Question

我正在尝试使用 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 的路径，例如this: ./locales/${lang}2.json 它将只加载文件 i18n/ru2.json.js 和 i18n/nw2.json.js 并忽略名称中没有 2 字符的文件。所以我猜它是用某种正则表达式而不是精确匹配来操作的。

谢谢

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

Answer 1

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

Answer 2

答案很简单：

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

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

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

希望这会有所帮助

Answer 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;
    });
  },
  ...

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

Why Webpack lazy loading loads all files from a folder?

lazy-loading

typescript

webpack

vue.js

vuejs2