你真的了解 ElementPlus 的按需导入吗？

站长

2024年04月14日 18:31 · 阅读数 8

引入

ElementPlus是我们在日常业务中经常会接触到的组件库，如果要在项目中引入它，我们一般会在打包工具的配置文件中使用ElementPlus的按需导入插件，对相关API和组件进行自动按需导入，从而减小打包产物的体积，使用起来就像这样：

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
	 // 疑问：
	 // AutoImport 和 Components 这两个插件是做什么的？
    AutoImport({
      // ElementPlusResolver 又是什么？
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

尽管这样可以实现我们想要的效果，但是你在使用的时候可能有过这样的疑问：

AutoImport和Components这两个插件是做什么的？它帮我们做了什么事情？
插件传入的参数ElementPlusResolver又是什么？

如果你也存在这些疑问，那这篇文章一定可以帮你弄清ElementPlus的按需导入的底层原理，扫清你的疑惑。

原理简介

开门见山地说：AutoImport插件的作用是自动导入项目中用到的API，而Components插件的作用是自动导入和注册组件。例如插件会自动把这个：

<script setup lang="ts">
ElMessage('AutoImport')
</script>

<template>
	<ElButton>Components</ElButton>
</template>

变成：

<script setup lang="ts">
// AutoImport 生成：导入 ElMessage API 和样式文件
import { ElMessage } from 'element-plus/es';
import 'element-plus/es/components/message/style/css'
// Components 生成：导入 ElButton 组件和样式文件
import { ElButton } from 'element-plus/es';
import 'element-plus/es/components/button/style/css'
  
ElMessage('AutoImport')
</script>

<template>
	<ElButton>Components</ElButton>
</template>

通过使用这两个插件，我们在项目中可以不用显式引入ElementPlus的API和组件，因为在执行npm dev或npm build的时候，Vite会调用插件来自动生成对应的导入语句。由于ElementPlus提供了基于ES Module的开箱即用的Tree Shaking功能，所以打包的时候只会引入需要的组件。

此外，两个插件会分别自动生成auto-imports.d.ts和components.d.ts文件，用来声明自动导入的API和组件的类型，通过在tsconfig.json的include中添加两个文件，便可以获得ts的提示。

到这里我们知道了AutoImport负责自动导入API，Components负责自动导入组件，那么ElementPlusResolver是做什么的呢？其实答案是显然的，因为这两个组件都不认识ElementPlus，不可能会知道自动导入哪些API和组件，因此它们需要一个解析Vue组件的工具，来为它们提供相关的信息，这个工具就是resolver（组件库解析器）。

ElementPlusResolver就属于resolver的一种，它为unplugin插件提供ElementPlus的信息。除此之外还有诸如VantResolver、ElementUIResolver等等，如果你自己开发了一个组件库，你甚至也可以为它写一个resolver，从而支持unplugin插件。