Vue CLI 3 构建生成的文件名包含波浪线 "~"。

Question

在我的应用程序中，我创建了不同的组件，它们共享通用的UI组件，如AppButton、AppSelect等。我正在使用webpack的代码拆分功能来延迟加载组件并获得单独的块。使用Vue CLI 3构建命令，我可以在dist文件夹中找到准备部署的文件。

有人知道波浪线“~”是什么意思吗？例如，在dist文件夹中，我可以找到像settings-diet~start-personalization.6e2ac313.js这样包含波浪线的名称。

- achwilko

Answer 1

我正在使用Webpack的代码分割功能来延迟加载组件并获取独立的代码块。

这是为什么：你正在进行模块的延迟加载。

在这种情况下，可能发生以下两种情况之一： 1. 你有一个入口 `settings-diet` ，它的某个位置需要一个名为`start-personalization` 的文件。 而不是将此必需文件的源代码包含在捆绑包`settings-diet`中，它被提取（“拆分”）到单独的文件中。只有在需要时才会加载此单独的文件，即懒加载。 2. 此文件包含`settings-diet`和`start-personalization`条目都共用的模块。

字符 `~` 表示其右侧的所有内容都已从其左侧提取出来。可通过配置属性 `splitChunks.automaticNameDelimiter` 更改所使用的字符。

这是由 SplitChunksPlugin 完成的工作：

默认情况下，它仅影响按需加载的代码块，因为更改初始块会影响 HTML 文件应包含的脚本标记以运行项目。

- sdgluck

---

感谢详细的回答。这很奇怪，因为settings-diet和start-personalization是完全不同的组件，使用不同的路由且没有任何共同的东西。这就是我想知道为什么webpack使用波浪号创建了这个文件的原因。无论如何，我会阅读更多关于分离块插件的内容，并尝试找到原因。 - achwilko

@achwilko，请查看文件并查看其包含的内容。根据您所说的，它可能只包含在“settings-diet”和“start-personalization”模块之间共同的模块。 - sdgluck

我在文件中看到了很多混乱的内容，但还是设法找到了共同的部分，谢谢！ :) - achwilko

Answer 2

从 Webpack 4.2.0 开始，可以通过 splitChunks.automaticNameDelimiter 配置拆分块文件名的分隔符。

- IVO GELOV

---

谢谢提供信息，但是分隔符名称对我来说没问题。只是想知道为什么会创建这个带有波浪符的文件？这与组件（SettingsDiet 和 StartPersonalization）有关吗？ - achwilko