Element Plus 按需加载与样式配置详解

在 Vue3 + Vite 项目中，合理配置 Element Plus 的按需引入方式，可以显著降低 JS/CSS 体积并提升构建效率。

本文将系统整理 Element Plus 的加载方式、样式模式差异及最佳实践。

一、Element Plus 引入方式对体积的影响

1. 全量引入（不推荐）

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

特点：

所有组件与样式一次性打包
无 Tree Shaking 优化
包体积较大

体积参考：

JS + CSS ≈ 600KB ~ 900KB（gzip 前）

仅适合 Demo 或快速原型。

2. 手动按需引入（维护成本高）

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

特点：

体积最小
可精细控制
手动维护成本高

不适合大型项目。

3. 自动按需引入（推荐方案） ⭐⭐⭐⭐⭐

使用插件自动导入：

bash

pnpm add -D unplugin-vue-components unplugin-auto-import

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

export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

特点：

自动引入组件和 API
自动加载样式
按需打包

体积参考：

100KB ~ 300KB

适合生产环境。

二、CSS 是否会膨胀？

不会。

Element Plus 将样式拆分为组件级文件：

text

button.css
table.css
dialog.css

按需加载时：

仅打包已使用组件样式
未使用组件不会进入构建产物

因此不会出现全量 CSS 问题。

三、importStyle 的核心区别

下面两种配置的本质差异：

写法一（默认方式）

AutoImport({
  resolvers: [ElementPlusResolver()],
}),
Components({
  resolvers: [ElementPlusResolver()],
})

等价于：

ElementPlusResolver({ importStyle: 'scss' })

👉 使用 SCSS 源码样式。

写法二（CSS 模式）

AutoImport({
  resolvers: [ElementPlusResolver()],
}),
Components({
  resolvers: [
    ElementPlusResolver({ importStyle: 'css' }),
  ],
})

👉 使用官方编译后的 CSS 文件。

四、scss 模式与 css 模式对比

对比项	scss（默认）	css 模式
样式来源	SCSS 源码	预编译 CSS
是否编译 Sass	是	否
构建速度	较慢	快
主题定制	强	弱
依赖 sass	需要	不需要
稳定性	中	高

五、AutoImport 与 Components 的职责

1. AutoImport（自动导 API）

负责自动引入 JS API：

ElMessage()
ElLoading()
ElMessageBox()

避免手动 import。

2. Components（自动导组件）

负责自动引入组件：

vue

<el-table />
<el-dialog />

并管理组件样式加载。

3. 为什么只给 Components 配 css？

Components({
  resolvers: [
    ElementPlusResolver({ importStyle: 'css' }),
  ],
})

原因：

API 本身无样式
组件才依赖 CSS

因此仅需在 Components 中配置样式模式。

六、推荐使用场景

适合使用 scss 模式的场景

仅当你需要：

深度主题定制
修改全局变量
自定义配色体系

示例：

scss

$--color-primary: red;

才推荐使用。

七、常见导致体积变大的原因

1. 全量引入图标

❌ 错误写法：

import * as Icons from '@element-plus/icons-vue'

✅ 正确写法：

import { Search, Edit } from '@element-plus/icons-vue'

2. 混用全量 CSS

import 'element-plus/dist/index.css'

会直接导致体积暴涨，应避免。

3. SSR / 构建配置错误

可能导致重复打包，需要注意构建分析。

八、推荐标准配置模板（Vite + Vue3）

适合大多数后台系统：

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

export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver({ importStyle: 'css' }),
      ],
    }),
  ],
}

九、性能优化进阶建议

1. 启用 Gzip / Brotli

Nginx 示例：

nginx

gzip on;
gzip_types text/css application/javascript;

可减少 50%+ 体积。

2. 构建分析工具

推荐使用：