Question

我正在处理一个大型应用程序，在该应用程序中我需要异步加载同一语言环境的多个翻译（即应用程序翻译+瞬间语言环境翻译+其他）。

因此，每当用户更改语言环境时，我们将需要以下内容：

translations.en.json
moment/locales/en.json
other/en.json

我懒于加载它们，但我想在一个请求中完成。这样我就可以做到：

import('translations/en').then(() => ...

这应该要求所有这些。我设法编写了一个脚本，该脚本为每个受支持的语言环境（包含这3个导入）创建一个文件，但是webpack仍会将其拆分为多个异步块。是否可以通过某种方式按区域设置合并它们？

谢谢！

Answer 1

使用webpackChunkName提示将多个导入放入一个块

import(/* webpackChunkName: "translations/en" */ 'translations/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'moment/locales/en').then(() => ...
import(/* webpackChunkName: "translations/en" */ 'other/en').then(() => ...

请注意，此解决方案无法创建以language作为参数的函数，因为提示必须在编译时确定。因此，您必须为每个语言环境重复所有三行。但这可能与您的脚本结合使用这些导入创建文件的效果很好。

如果不起作用，请查看SplitChunksPlugin文档。

合并多个Webpack块

1 个答案: