ElementPlus按需加载 + 配置中文避坑（干掉1MB冗余代码）

Hyyy2025-04-03 18:37

最近优化项目性能时发现，之前为了省事直接全量引入了ElementPlus（明明只用了个日历组件！），首页直接白嫖了1MB资源包。必须按需加载！！

成果如下：资源体积-1MB / FCP-0.3s，记录关键步骤

解法核心：

用两个插件（unplugin-auto-import负责自动导入API，unplugin-vue-components负责自动注册组件），只打包你用到的组件和样式。

1. 安装全家桶

html 复制代码

pnpm add element-plus  # 库本体  
pnpm add -D unplugin-auto-import unplugin-vue-components  # 核心工具：自动导API+组件

2. Vite配置抄作业（10 秒搞定）

js 复制代码

// vite.config.ts
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({ resolvers: [ElementPlusResolver()] }), // 自动导API
    Components({ resolvers: [ElementPlusResolver()] })    // 自动导组件
  ]
})

3. 中文配置（如果需要）

由于 Elment-Plus 默认是英文版的，我们还需要给他加个中文配置

只需要用ElConfigProvider来给他进行个笼罩，配置 locale 属性即可。

html 复制代码

// App.vue
<template>  
  <el-config-provider :locale="zhCn">  <!-- 这里塞中文包 -->  
    <router-view />  
  </el-config-provider>  
</template>  
  
<script setup>
import { RouterView } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>