Vue CLI 3 使用波浪号“~”构建输出文件

Posted 2023-02-22

【中文标题】Vue CLI 3 使用波浪号“~”构建输出文件

【英文标题】：Vue CLI 3 build outputs files with tilde "~"

【发布时间】：2019-06-25 23:47:11

【问题描述】：

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

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

【参考方案1】：

我正在使用 webpack 的代码拆分功能来延迟加载组件并获得单独的块。

这就是为什么：你是延迟加载模块。

在这种情况下，似乎发生了以下两种情况之一：

您有一个条目settings-diet，在其树中的某处需要一个文件start-personalization。而不是这个所需文件的源代码包含在包settings-diet 中，而是从主包中提取（“拆分”）到一个单独的文件中。这个单独的文件只能在需要时才加载，即延迟加载。

此文件包含settings-diet 和start-personalization 条目共有的模块。

~ 字符表示其右侧的所有内容均已从其左侧的所有内容中提取。使用的字符可通过splitChunks.automaticNameDelimiter 配置属性进行配置。

这是SplitChunksPlugin的作品：

默认情况下，它只影响按需块，因为更改初始块会影响 html 文件运行项目时应包含的脚本标签。

【讨论】：

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

@achwilko 查看文件并查看其中包含的内容。鉴于您所说的，它可能只包含 settings-diet 和 start-personalization 模块之间的通用模块。

我在文件中看到了很多乱七八糟的东西，但我很想找到共同的块，谢谢！ :)

【参考方案2】：

截至Webpack 4.2.0，分割块文件名的分隔符可以通过splitChunks.automaticNameDelimiter配置

【讨论】：

感谢您的信息，但分隔符名称对我来说很好。只是想知道为什么这个带有波浪号的文件被创建了？组件之间是否有关联（SettingsDiet 和 StartPersonalization）？