0

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

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

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

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

更新

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

4

1 回答 1

1

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

最佳实践是使用命名导入，因此它们可以被“treeshaked”。

于 2018-05-20T01:07:41.953 回答