Vue CLI 3 构建输出带有波浪号“~”的文件

Question

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

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

Answer 1

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

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

在这种情况下，看起来发生了以下两件事之一：

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

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

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

这是以下人员的工作SplitChunksPlugin：

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

Answer 2

从Webpack 4.2.0开始，可以通过以下方式配置分割块文件名的分隔符splitChunks.automaticNameDelimiter