# Element Plus 按需加载与样式配置详解
URL: https://caijiao.org/posts/50
Source: docs/posts/50.md
Description: 深入解析 Element Plus 在 Vite 项目中的按需引入方案，对比 scss 与 css 模式差异，优化 JS/CSS 体积与构建性能
-------------
# Element Plus 按需加载与样式配置详解
在 Vue3 + Vite 项目中，**合理配置 Element Plus 的按需引入方式**，可以显著降低 JS/[CSS](/css/) 体积并提升构建效率。
本文将系统整理 Element Plus 的加载方式、样式模式差异及最佳实践。
## 一、Element Plus 引入方式对体积的影响
### 1. 全量引入（不推荐）
```js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
```
特点：
* 所有组件与样式一次性打包
* 无 Tree Shaking 优化
* 包体积较大
体积参考：
> JS + CSS ≈ 600KB ~ 900KB（gzip 前）
仅适合 Demo 或快速原型。
### 2. 手动按需引入（维护成本高）
```js
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
```
特点：
* 体积最小
* 可精细控制
* 手动维护成本高
不适合大型项目。
### 3. 自动按需引入（推荐方案） ⭐⭐⭐⭐⭐
使用插件自动导入：
```bash
pnpm add -D unplugin-vue-components unplugin-auto-import
```
```js
// 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 的核心区别
下面两种配置的本质差异：
### 写法一（默认方式）
```js
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
```
等价于：
```js
ElementPlusResolver({ importStyle: 'scss' })
```
👉 使用 SCSS 源码样式。
### 写法二（CSS 模式）
```js
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [
ElementPlusResolver({ importStyle: 'css' }),
],
})
```
👉 使用官方编译后的 CSS 文件。
## 四、scss 模式与 css 模式对比
| 对比项 | scss（默认） | css 模式 |
| --------- | -------- | ------- |
| 样式来源 | SCSS 源码 | 预编译 CSS |
| 是否编译 Sass | 是 | 否 |
| 构建速度 | 较慢 | 快 |
| 主题定制 | 强 | 弱 |
| 依赖 sass | 需要 | 不需要 |
| 稳定性 | 中 | 高 |
## 五、AutoImport 与 Components 的职责
### 1. AutoImport（自动导 API）
负责自动引入 JS API：
```js
ElMessage()
ElLoading()
ElMessageBox()
```
避免手动 import。
### 2. Components（自动导组件）
负责自动引入组件：
```vue
```
并管理组件样式加载。
### 3. 为什么只给 Components 配 css？
```js
Components({
resolvers: [
ElementPlusResolver({ importStyle: 'css' }),
],
})
```
原因：
* API 本身无样式
* 组件才依赖 CSS
因此仅需在 Components 中配置样式模式。
## 六、推荐使用场景
### 推荐使用 css 模式（90% 项目）
适用于：
* 管理后台
* 企业系统
* 常规业务项目
* 不需要深度主题定制
优点：
* 构建快
* 体积稳定
* 配置简单
### 适合使用 scss 模式的场景
仅当你需要：
* 深度主题定制
* 修改全局变量
* 自定义配色体系
示例：
```scss
$--color-primary: red;
```
才推荐使用。
## 七、常见导致体积变大的原因
### 1. 全量引入图标
❌ 错误写法：
```js
import * as Icons from '@element-plus/icons-vue'
```
✅ 正确写法：
```js
import { Search, Edit } from '@element-plus/icons-vue'
```
### 2. 混用全量 CSS
```js
import 'element-plus/dist/index.css'
```
会直接导致体积暴涨，应避免。
### 3. SSR / 构建配置错误
可能导致重复打包，需要注意构建分析。
## 八、推荐标准配置模板（Vite + Vue3）
适合大多数后台系统：
```js
// 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/) 示例：
```nginx
gzip on;
gzip_types text/css application/javascript;
```
可减少 50%+ 体积。
### 2. 构建分析工具
推荐使用：
```bash
pnpm add -D rollup-plugin-visualizer
```
分析打包结果，定位体积来源。
## 十、总结
✅ 推荐使用自动按需加载
✅ 业务项目优先选择 css 模式
✅ 避免混用全量样式
✅ 合理配置图标引入
最终建议配置：
```js
ElementPlusResolver({ importStyle: 'css' })
```
在稳定性、体积和维护成本之间取得最佳平衡。