vue.js重复导入有没有效率问题

Question

我重构了一些 vue 代码并找到了如下重复项；

- main.ts
import BootstrapVue from 'bootstrap-vuew';
Vue.use(BootstrapVue);

我知道如果 main.ts 做 'import bootstrap-vue' 那么其他 vue 文件使用 bootstrap 组件而不导入。但是我的同事在每个 vue 组件上都做了这种毫无意义的导入。

所以我想知道这个重复是否有任何关键的效率问题？如果是，是否与渲染速度有关？

Answer 1

在全局“main.ts”中导入一个足以在整个应用程序的任何组件中使用的库。但是在所有组件中多次导入会导致生成文件过大。因此，最好只使用“main.ts”中的一个库导入。

Answer 2

导入本身不是问题。一个模块只被评估一次并包含在一个包中。如果导入值未在导入它们的模块中使用，它会在生产构建中被丢弃。

是Vue.use让它与众不同。导入的插件不会因为被使用而被丢弃。一个插件可以产生副作用，应该只应用一次并且应该有防止多次安装的保护措施。有问题的插件 has such safeguard，因此除了每个模块有几个字节的不必要代码外，这不会引入任何问题。

这样做的必要性值得怀疑。 Vue 插件影响全局应用程序行为。 Vue.use 每个插件只需要使用一次，这通常在入口点完成，但也可以在功能模块中完成，后者可以指定自己的插件依赖项以实现解耦目的。在每个使用库组件的模块中使用 Vue.use 没有意义。相反，他们可以根据需要导入组件，这允许不包括整个库，考虑到应用程序中的任何地方都没有插件安装。

因此，它要么为每个应用程序或功能模块全局安装一次插件，要么安装多次：

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue)

或根据需要在本地多次使用库的子集：

import { DropdownPlugin } from 'bootstrap-vue';
Vue.use(DropdownPlugin)

And/or 根据需要多次在本地导入所有使用的组件：

import { BDropdown, BDropdownItem, ... } from 'bootstrap-vue';
export default {
  components: {
    BDropdown, BDropdownItem, ...
  }
}

它总是取决于库是否应该以这种或那种方式使用。

vue.js重复导入有没有效率问题

Is there any efficiency issue in duplicated importing in vue.js

import

performance

vue.js