我发现了类似的主题在 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个问题:
是否
webpack
添加到站点的捆绑/打包版本只是真正使用的组件(以某种方式检查使用了哪些组件?是否需要指定任何Webpack
设置?)或webpack
只是添加全局导入的所有内容(在 中main.js
)?基于第一个问题:在
webpack
仅使用单个组件的情况下,捆绑/打包(如果使用)站点的大小是否有任何盈利能力?
我有一个相当大的项目,其中导入了很多组件main.js
,我想知道,我应该保持原样还是重新组织所有内容。
更新
我用Vue.use(BoostrapVue)
我需要的组件替换了(我用了很多)。Vue.use(BoostrapVue)
之后我npm run build
的dist
文件夹是 4.6MB。一旦我开始导入每个需要的组件,dist
文件夹大小就变成了 4.2MB。