Element-Plus 按需加载优化包大小

一、安装依赖

首先，安装用于按需引入 Element Plus 的插件：

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

二、配置 Vite

在 vite.config.js 文件中进行配置，添加这两个插件以自动按需引入组件和样式。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    // 自动引入 Element Plus 组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 自动引入 Element Plus 相关的 API
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

三、移除全局导入

在使用该方法之后，不再需要手动在每个文件中导入 Element Plus 组件，因为这些插件会自动处理按需引入。您也不需要在代码中导入全局 CSS 或手动引入组件，插件会处理组件和样式的按需加载。

比如之前我在全局 main.js 中引入了 Element-Plus 组件和样式，如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(router);
app.use(ElementPlus);

app.mount('#app');

现在就要去掉 element-plus 的引用，修改如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
app.mount('#app');

原理是：

1. unplugin-vue-components 插件会自动检测您在各个 Vue 组件中使用的 Element Plus 组件，并按需引入所需的 JavaScript 和样式。

2. unplugin-auto-import 插件会自动处理与 Element Plus 相关的 API（如 ElMessage, ElNotification 等），不需要手动在组件中引入这些 API。

四、重新构建项目

npm run dev # 开发模式 npm run build # 生产模式构建

此时构建的项目的就会达到以下 2 个效果：

• 按需加载：只会加载用到的 Element Plus 组件和相应的样式，极大地减少了打包文件的大小。

• 自动引入：不需要手动引入组件，插件会根据使用情况自动引入，简化了开发流程。