Typescript 为什么Webpack延迟加载从文件夹加载所有文件？

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

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

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

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

有趣的是，如果我重命名文件ru->ru2和nw->nw2，并将import更改为使用数字为2的路径，如：./locales/${lang}2.json，它将只加载文件i18n/ru2.json.js和i18n/nw2.json.js，并忽略名称中没有2个字符的文件。所以我猜它是用某种regexp操作的，而不是精确匹配

多谢各位

---

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

Webpack不知道在运行时需要该目录中的哪个文件，所以它需要包含包中的所有文件

Webpack不知道运行时需要该目录中的哪个文件，因此它需要包含包中的所有文件

答案很简单：

默认情况下，vue cli已启用“预回迁”设置。这打破了延迟加载的整个概念

您可以在网页包设置中关闭预回迁

如果使用vue cli，则必须扩展vue.config.js：

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

希望这会有所帮助

答案很简单：

默认情况下，vue cli已启用“预回迁”设置。这打破了延迟加载的整个概念

您可以在网页包设置中关闭预回迁

如果使用vue cli，则必须扩展vue.config.js：

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

---

希望这将有助于禁用vue cli prefech这是我用于本地语言的配置。也可以在vue cli文档中找到

vue.config.js

... 链接网页包：配置=>{ //删除预取插件 //config.plugins.deleteprefetch； //或： //修改其选项： config.pluginprefetch.tappoptions=>{ 选项[0]。文件黑名单=选项[0]。文件黑名单| |[]； 选项[0]。文件黑名单。推送/lang.+？\.js$/； 选项[0]。fileBlacklist.push/lang.+？\.js.map$/； 返回选项； }; }, ...

---

要禁用vue cli prefech，这里是我用于本地语言的配置。也可以在vue cli文档中找到

vue.config.js

... 链接网页包：配置=>{ //删除预取插件 //config.plugins.deleteprefetch； //或： //修改其选项： config.pluginprefetch.tappoptions=>{ 选项[0]。文件黑名单=选项[0]。文件黑名单| |[]； 选项[0]。文件黑名单。推送/lang.+？\.js$/； 选项[0]。fileBlacklist.push/lang.+？\.js.map$/； 返回选项； }; }, ...

---

当您正在调用getI18nI时，目前还没有调用它，应该通过单击按钮来调用它。即使这个函数从未被使用过，但已经被导出了——导入的东西在调用getI18nI时发生了——目前为止还没有调用它，应该在单击按钮时调用它。即使这个函数从未被使用过，但已经被导出了——导入的东西发生了，这是有意义的。但我不清楚——如何避免？或者整个问题都应该改变：如何在运行时正确地延迟加载块？您可以不使用动态值进行导入，而是将getI18n函数重新构造为类似于：```const langs={en:=>import'./locales/en.json'，ru:=>import'./locales/ru.json'}函数getI18nlang{return langs[lang].then…}``然后webpack会提前知道包中要包含哪些文件，但它们将分为不同的块，因此只有使用的lang才会发送到浏览器。好的，这是有意义的。但我不清楚——如何避免？或者整个问题都应该改变：如何在运行时正确地延迟加载块？您可以不使用动态值进行导入，而是将getI18n函数重新构造为类似于：```const langs={en:=>import'./locales/en.json'，ru:=>import'./locales/ru.json'}函数getI18nlang{return langs[lang].then…}``然后webpack会提前知道包中要包含哪些文件，但这些文件将分为不同的块，因此只有使用的lang才会发送到浏览器。

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