优化前端性能之从“全局引入”改为“按需引入”

博主用 Chrome 的 Lighthouse 分析项目时， Lighthouse 提示说明我的 element-plus.js 文件太大了（3.48 MB），压缩它预计可以省下 1.15 MB。

这通常是因为全局引入了整个 Element Plus 库 ，但实际用到的组件可能还不到一半。解决方法很简单：从"全局引入"改为"按需引入"。

具体怎么改？（Vite 项目）

下面是在 Vite + Vue 3 项目中，将 Element Plus 改为按需引入的完整操作步骤。

1. 删除当前的"全量引入"代码

在你的 main.js 或 main.ts 文件中，找到并删除或注释掉下面这几行全局引入的代码：

javascript 复制代码

// src/main.js - 请删除或注释掉以下全量引入的代码

// 删除这一行
// import ElementPlus from 'element-plus'
// 删除这一行
// import 'element-plus/dist/index.css'

// 删除这一行
// app.use(ElementPlus)

2. 安装按需引入需要的插件

打开终端，进入你的项目根目录，执行以下命令安装两个 Vite 插件：

bash 复制代码

npm install -D unplugin-vue-components unplugin-auto-import

3. 配置 Vite

在你的项目根目录下找到 vite.config.js（或 vite.config.ts）文件，修改 plugins 数组，加入按需引入的配置：

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 1. 引入两个新插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// 2. 引入 Element Plus 的解析器
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 3. 配置自动导入 Vue API（ref, reactive...）
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 4. 配置自动导入 Vue 组件，并告诉它为 Element Plus 启用按需加载
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

4. 重启项目，验证效果

配置修改完成后，需要重启你的开发服务器：

bash 复制代码

npm run dev

重启后，插件就会开始工作。现在页面里写的 <el-button> 等组件，都会被自动按需导入。

对比结果：能省多少？

按需引入的优化效果非常明显 。根据多份优化实践报告，这项改动后的 element-plus.js 体积可以缩减 60%-80%。

引入方式	典型体积	首屏加载时间 (3G网络)	说明
全局引入 (目前)	~2.3 MB	~2.1 秒	打包了整个库，包含所有未使用的组件
按需引入 (推荐)	~800 KB	~0.7 秒	只打包了你页面中实际用到的组件

现在你理解的按需引入，和"路由懒加载"一样，都是解决首屏加载慢的核心手段。如果你不确定自己的项目是否配置成功，可以在打包后（npm run build）检查 dist 目录，看看是否生成了多个独立的 CSS/JS 文件来确认。