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

Posted 2023-02-23

【中文标题】全局导入与单个组件导入 + webpack：最终（捆绑/打包）大小有啥区别吗？

【英文标题】：Global import vs individual component import + webpack: is there any difference in final (bundled/packed) size?全局导入与单个组件导入 + webpack：最终（捆绑/打包）大小有什么区别吗？

【发布时间】：2018-10-30 00:47:53

【问题描述】：

我发现了类似的话题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个问题：

webpack 是否添加到站点的捆绑/打包版本中只是真正使用了组件（以某种方式检查使用了哪些组件？是否有必要指定任何 Webpack 设置？）或webpack 只是添加所有内容是全局导入的（main.js）？

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

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

更新

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

【参考方案1】：

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

最佳做法是使用命名导入，因此可以“摇树”。

【讨论】：

那么，基于bootstrap-vue 的示例，导入component individually 而不是all components together via main.js 更可取，如上所示，对吗？在这种情况下，最终捆绑包的大小会更小，因此可以更快地下载网站，对吧？

是的。只要得到你需要的，最好从 es 发行版 ('bootstrap-vue/es/components')