前言

在日常 Vue 项目开发过程中，或多或少都会使用相关的组件库。

而组件库常用的两种加载方式：全局引入和按需引入，要么导致项目体积大，要么引入麻烦，在某种程度上来说，都不够友好。

而 unplugin-vue-components 可以不需要手动引入组件，能够让开发者就像全局组件那样进行开发，但实际上又是按需引入，且不限制打包工具。

使用效果

以 Antd Vue 和 vite 为例：

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [
          AntDesignVueResolver()
      ],
    }),
  ],
};

这样就能自动引入 Antd Vue 的组件，不需要手动 import 组件以及组件样式，使用起来就像全局组件一样，但这是按需自动引入，可以减少代码体积。

在项目中，这样直接使用即可。

<template>
  <a-button>按钮</a-button>
</template>

解析器

unplugin-vue-components 为主流的 UI 组件库提供了内置的支持，通过使用对应 UI 组件库的解析器（resolvers），就能自动引入对应的组件库组件及样式。

解析器可以是一个函数或者是对象。

以对象为例：

{
    type: 'component',
    resolve: (name: string) => {
        const map = {
            'Abutton': 'Button'
        }

        const path = `ant-design-vue/es`
        const name = map[name]

        return {
          // Button
          name,     
          // ant-design-vue/es
          from: path,   
          // ant-design-vue/es/button/style/css
          sideEffects: `ant-design-vue/es/${name.toLowerCase()}/style/css`, 
        }
      }
    },
  }
}

resolve 是一个函数，当遇到 a-button 时，就会调用该函数，入参是 AButton

函数需要返回一个对象，例如：

{
  name: 'Button',       
  from: 'ant-design-vue/es',    
  sideEffects: 'ant-design-vue/es/button/style/css',    
}

这样 unplugin-vue-components 就会加入以下代码：

import { Button } from 'ant-design-vue/es'
import 'ant-design-vue/es/button/style/css'

而 ant-design-vue/es/button/style/css 中，引入了 Button 组件相关的样式：

import '../../style/default.css';
import './index.css';

一般情况按需引入组件，需要把组件的样式也引入进来，这就是 sideEffects 的作用。

实现原理

可能大家会想到，将 Vue 处理成以下内容即可：

<template>
  <a-button>按钮</a-button>
</template>

<script setup>
import { Button as AButton } from 'ant-design-vue/es'
import 'ant-design-vue/es/button/style/css'
</script>

看起来可行，但其实不行，因为你 script 有普通的写法和 setup 写法，如果要做，得兼容两种情况，比较复杂。

其实 unplugin-vue-components 的实现非常简单。我们直接来看看 Vue 编译后的代码：

可以看到，全局组件编译后会用 resolveComponent 包裹，该函数在 Vue 官网有说明，就是按名称找到已注册的全局组件。

unplugin-vue-components 只需要正则匹配 _resolveComponent，拿到入参 a-button，然后根据将名称标准化为 AButton，然后交给解析器，解析器会返回如下对象：

{
  name: 'Button',       
  from: 'ant-design-vue/es',    
  sideEffects: 'ant-design-vue/es/button/style/css',    
}

然后修改 Vue 编译后的代码（unplugin-vue-components 会在 Vue 插件之后执行）

引入以下代码：

import { Button as __unplugin_components_0 } from 'ant-design-vue/es';
import 'ant-design-vue/es/button/style/css';
const _sfc_main = {}

并且将 _resolveComponent 替换成 __unplugin_components_0

这就将 a-button 组件的全局使用，转换成了按需引入的方式

局限性

unplugin-auto-import 看起来非常厉害，但它也有些局限性：

不能作用于 JSX，因为插件只处理 template 模板的代码。不过JSX 则需要配合 unplugin-auto-import（用于自动引入变量）
在 Vite 中 CSS 无法 tree shaking，不过这个是 Vite 的问题。但 JS 仍然是可以 tree shaking，相对于全局注册组件，对构建产物体积的优化还是非常可观的

总结

使用 unplugin-vue-components 可以非常方便地实现按需引入组件的功能，从而减小项目体积、加快项目加载速度，提升用户体验。

它通过正则匹配 Vue 的全局组件（编译后使用 _resolveComponent 包裹），然后引入组件并替换 _resolveComponent，因此这种方式，只适用于 template 模板编译后的代码，JSX 的自动引入，则需要配合 unplugin-auto-import（用于自动引入变量）

实际上， unplugin-vue-components 还能自动引入项目 components 目录下的组件，同时也支持自定义指定的自动按需引入，想要了解更多具体用法的话，可以查看 unplugin-vue-components 文档

该文章借鉴了这位大佬的文章

unplugin-vue-components实现原理解析

前言

使用效果

解析器

实现原理

局限性

总结