菜鸟教程

主题

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

在 Vue3 + Vite 项目中，合理配置 Element Plus 的按需引入方式，可以显著降低 JS/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
<el-table />
<el-dialog />

并管理组件样式加载。

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
gzip on;
gzip_types text/css application/javascript;

可减少 50%+ 体积。

2. 构建分析工具 ​

推荐使用：

bash
pnpm add -D rollup-plugin-visualizer

分析打包结果，定位体积来源。

十、总结 ​

✅ 推荐使用自动按需加载

✅ 业务项目优先选择 css 模式

✅ 避免混用全量样式

✅ 合理配置图标引入

最终建议配置：

js
ElementPlusResolver({ importStyle: 'css' })

在稳定性、体积和维护成本之间取得最佳平衡。

最后更新: