Vue2全局注册Vue.component与组件内局部导入的差异及推荐方案

一、两种引入方式的性能影响 #

全量注册（Vue.use(MyLib)）的性能损耗 #

• 产物体积膨胀：全量引入会将组件库所有组件的代码全部打入最终构建包，即使开发者只使用了少量组件，冗余代码会直接拉长首屏资源加载时间，是最核心的性能影响点。
• 运行时内存占用升高：所有组件的构造函数会被挂载到Vue全局组件映射表中，即使从未渲染也会持续占用内存，组件量级越大影响越明显。
• 初始化速度小幅下降：应用启动时install方法会批量执行所有组件的注册逻辑，组件数量多的情况下会略微拖慢应用初始化效率。

按需局部导入的性能优势 #

• 配合构建工具的Tree Shaking能力，仅会将实际用到的组件打包进产物，大幅减少冗余代码。
• 仅在组件被实际使用的场景下才会加载对应代码，内存占用更低。

二、推荐实现方案 #

组件库设计侧 #

你当前的导出写法已经兼容了全量和按需两种使用方式，只需补充两个优化点即可：

1. 组件库打包时输出ES Module格式的产物，确保Tree Shaking可以正常生效，未使用的组件能被自动移除。
2. 可以配套提供按需导入的工具配置（比如babel插件、unplugin-auto-import预设），减少开发者手动导入的重复代码量。

注意你当前index.ts的install方法存在笔误：Vue.component('MyComponent1', MyComponent)中的第二个参数应该对应MyComponent1，否则注册组件会报错，修正后的代码如下：

import MyComponent1 from './components/MyComponent1.vue';
import MyComponent2 from './components/MyComponent2.vue';

export {MyComponent1, MyComponent2}
export default{
    install(Vue:any){
        Vue.component('MyComponent1', MyComponent1);
        Vue.component('MyComponent2', MyComponent2);
    }
}

自有业务项目使用侧 #

不需要一刀切，按组件使用频率区分处理即可：

• 高频通用组件：比如按钮、输入框、提示框这类几乎每个页面都会用到的组件，直接在main.ts全局注册，既减少重复导入代码，也不会额外增加太多体积。
• 低频、大体积组件：比如富文本编辑器、复杂图表、3D组件这类仅少数页面使用的组件，统一使用局部按需导入，还可以配合Vue异步组件写法实现路由级别的懒加载，进一步优化首屏性能。

内容的提问来源于stack exchange，提问作者SNO