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配置拆分块文件名的分隔符