Vue CLI 3 build выводит файлы с тильдой "~"

Question

В моем приложении я создал различные компоненты, которые совместно используют общие компоненты пользовательского интерфейса, такие как AppButton, AppSelect и т. Д. Я использую функцию разбиения кода в веб-пакете для отложенной загрузки компонентов и получения отдельного чанка.Используя команду сборки Vue CLI 3. Я готов развернуть файлы в папке dist.

Кто-нибудь знает, что означает тильда "~"?Например, в папке dist я могу найти имя типа settings-diet~start-personalization.6e2ac313.js, содержащее тильду.

Answer 1

Я использую функцию разделения кода веб-пакета для отложенной загрузки компонентов и получения отдельного чанка.

Вот почему: вы лениво загружаете модули.

В этом случае похоже, что происходит одно из двух:

1. у вас есть запись settings-diet, что где-то в ее дереве требуется файл start-personalization.Вместо того, чтобы исходный код этого обязательного файла был включен в комплект settings-diet, он извлекается («разделяется») из основного комплекта в отдельный файл.Этот отдельный файл может быть загружен только тогда, когда это необходимо, то есть лениво.

2. этот файл содержит модули, общие для записей settings-diet и start-personalization.

Символ ~ указывает, что все справа от него извлечено из того, что слева.Используемый символ настраивается через свойство конфигурации splitChunks.automaticNameDelimiter.

Это работа SplitChunksPlugin:

По умолчанию он влияет только на-запрос чанков, поскольку изменение начальных чанков повлияет на теги сценариев, которые HTML-файл должен включать для запуска проекта.

Answer 2

Начиная с Webpack 4.2.0 разделитель для имен файлов разделенных чанков можно настроить через splitChunks.automaticNameDelimiter