Как сделать treehaking с помощью vuetify?

Question

У меня vue приложение с vuetify.

Для того, чтобы в Vuetify произошла смена деревьев, мне нужно выполнить импорт следующим образом: import Vuetify from 'vuetify/lib'; в соответствии с документами .

В моем приложении Vuetify у меня нет v-dialog.

Когда я компилирую код своего приложения с помощью import Vuetify from 'vuetify', я вижу в пакете dist js - с кодом vuetify I, который я не использую (например, v-dialog, v-dialog--animated ).

Когда я компилирую с import Vuetify from 'vuetify/lib';, я не вижу неиспользуемый код (я не вижу v-dialog).

Но минусом я должен объявить каждый компонент, который я хочу использовать.

Есть ли простой способ сотрясения дерева? например, я ожидаю от vue поиска неиспользуемого кода в комплекте vuetify и его удаления.

Answer 1

Используете ли вы Vue CLI ? Если нет, я бы предложил сделать это. Вам просто нужно несколько команд:

Установить Vue CLI

npm install -g @vue/cli

Это глобально установит Vue CLI (вам, возможно, понадобятся права администратора). Для получения дополнительной информации см .: Установка | Vue CLI

Создать ваше приложение

vue create my-app

Это настроит ваш проект на Vue. js и задаст вам несколько вопросов. Вы можете использовать набор по умолчанию. После этого вы должны перейти в каталог проектов.

cd my-app

Установить Vuetify

vue add vuetify

Это установит платформу Vuetify. Вы можете использовать настройки по умолчанию. После этого у вас есть настройки проекта с Vue. js + Vuetify. Также настройкой по умолчанию является использование встряхивания дерева при создании приложения в конце.

Для более подробной информации у меня есть пример здесь , который также включает Electron в конце. Но шаги до конфигурации Vuetify одинаковы. При такой настройке у вас автоматически встряхивается дерево.