Глобальный импорт против импорта отдельных компонентов + веб-пакет: есть ли разница в конечном размере (в упаковке / упаковке)?

Question

Я нашел похожую тему Каковы плюсы / минусы импорта компонентов в main.js (для VueJS)? , но я хочу копнуть немного глубже.

Например, bootsrap-vue позволяет импортировать все компоненты вместе через main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

или любой отдельный компонент, например:

import bAlert from 'bootstrap-vue/es/components/alert/alert';
Vue.component('b-alert', bAlert);

Многие компоненты bootstrap-vueЯ просто не пользуюсь, поэтому здесь у меня есть 2 вопроса:

1. Добавляет ли webpack в комплектную / упакованную версию сайта только действительно используемые компоненты (Каким-то образом проверяет, какие компоненты используются?Нужно ли указывать какие-либо настройки Webpack?) Или webpack просто добавляет все, что импортируется глобально (в main.js)?

2. На основании 1-го вопроса: есть лилюбая прибыльность в размере упакованного / упакованного (если использовать webpack) сайта в случае использования только отдельных компонентов?

У меня довольно большой проект с большим количеством компонентов, импортированных в main.js и я хотел бы знать, должен ли я оставить все как есть или реорганизовать канунrything.

ОБНОВЛЕНИЕ

Я заменил Vue.use(BoostrapVue) компонентами, которые мне нужны (я использую довольно много).С Vue.use(BoostrapVue) после npm run build моя папка dist была 4,6 МБ.Когда я начал импортировать каждый необходимый компонент, размер папки dist стал 4,2 МБ.

Answer 1

Если вы импортируете *, веб-пакет не сможет узнать, какие вещи не использовались, а какие были.Он поместит все в окончательный комплект.

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