全局導入與單個組件導入+ Webpack：最終（打包/打包）大小是否有差異？

Question

我發現了類似的主題（在VueJS中）在main.js中導入組件的利弊是什么？ 但我想更深入一點。

例如， 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許多組件，因此，這里有兩個問題：

1. webpack添加到站點的捆綁/打包版本中只是真正使用過的組件（以某種方式檢查使用了哪些組件？是否需要指定任何Webpack設置？）或webpack只是添加了全局導入的所有內容（在main.js ）？

2. 基於第一個問題：如果僅使用單個組件，捆綁/打包（如果要使用webpack ）站點的規模是否有盈利能力？

我有一個很大的項目，在main.js導入了許多組件，我想知道，是保留原樣還是重新組織一切。

UPDATE

我將Vue.use(BoostrapVue)替換為Vue.use(BoostrapVue)的組件（我Vue.use(BoostrapVue)使用）。 使用npm run build后的Vue.use(BoostrapVue) npm run build我的dist文件夾為4.6MB。 一旦我開始導入每個需要的組件， dist文件夾的大小就變為4.2MB。

Answer 1

如果導入* webpack，將無法知道未使用過哪些東西以及使用了哪些thig。 它將所有內容放入最終捆綁包中。

最佳做法是使用命名的導入，以便可以對其進行“搖晃”。