在我的应用程序中,我创建了不同的组件,它们共享通用的UI组件,如AppButton、AppSelect等。我正在使用webpack的代码拆分功能来延迟加载组件并获得单独的块。使用Vue CLI 3构建命令,我可以在dist文件夹中找到准备部署的文件。有人知道波浪线“~”是什么意思吗?例如,在dist文件夹中,我可以找到像settings-diet~start-personalization.6e2ac313.js这样包含波浪线的名称。
我正在使用Webpack的代码分割功能来延迟加载组件并获取独立的代码块。这是为什么:你正在进行模块的延迟加载。在这种情况下,可能发生以下两种情况之一: 1. 你有一个入口 `settings-diet` ,它的某个位置需要一个名为`start-personalization` 的文件。 而不是将此必需文件的源代码包含在捆绑包`settings-diet`中,它被提取(“拆分”)到单独的文件中。只有在需要时才会加载此单独的文件,即懒加载。 2. 此文件包含`settings-diet`和`start-personalization`条目都共用的模块。字符 `~` 表示其右侧的所有内容都已从其左侧提取出来。可通过配置属性 `splitChunks.automaticNameDelimiter` 更改所使用的字符。这是由 SplitChunksPlugin 完成的工作:默认情况下,它仅影响按需加载的代码块,因为更改初始块会影响 HTML 文件应包含的脚本标记以运行项目。
settings-diet
和start-personalization
是完全不同的组件,使用不同的路由且没有任何共同的东西。这就是我想知道为什么webpack使用波浪号创建了这个文件的原因。无论如何,我会阅读更多关于分离块插件的内容,并尝试找到原因。 - achwilko