全局导入与单个组件导入+ webpack：最终（捆绑/打包）大小有什么区别吗？

Question

我找到了类似的主题What are the pros/cons of importing components in main.js (for 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设置？）或{{1只需添加全局导入的所有内容（在webpack中）？

2. 基于第一个问题：在仅使用单个组件的情况下，捆绑/打包（如果使用main.js）网站的大小是否有任何盈利？

我有一个很大的项目，在webpack中导入了很多组件，我想知道，我应该保留原样还是重新组织所有内容。

更新

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

Answer 1

如果您导入* webpack，则无法知道哪些内容未被使用，以及这些内容是什么。它会将所有内容都放在最后的包中。

最佳做法是使用命名导入，因此可以使用#sha; treeshaked＆＃34;。