全局导入 vs 单个组件导入 + webpack：最终 (bundled/packed) 大小有什么不同吗？

Question

我找到了类似的主题但我想更深入地挖掘一下。

例如，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个问题：

是否 webpack 添加到 bundled/packed 版本的站点只是真正使用的组件（以某种方式检查使用了哪些组件？是否有必要指定任何 Webpack 设置?) 或 webpack 只是添加全局导入的所有内容（在 main.js 中）?
基于第一个问题：bundled/packed（如果使用webpack）站点的规模在仅使用单个组件的情况下是否有盈利能力？

我有一个很大的项目，在 main.js 中导入了很多组件，我想知道，我应该保持原样还是重新组织一切。

更新

我用我需要的组件替换了Vue.use(BoostrapVue)（我用了很多）。在 npm run build 之后 Vue.use(BoostrapVue) 我的 dist 文件夹是 4.6MB。一旦我开始导入每个需要的组件，dist 文件夹大小就变成了 4.2MB。

Answer 1

如果你导入 * webpack 将无法知道哪些东西没有被使用，哪些东西被使用了。它会将所有内容放入最终包中。

最佳做法是使用命名导入，因此它们可以 "treeshaked"。

Global import vs individual component import + webpack: is there any difference in final (bundled/packed) size?