Element Plus 完整引入和按需导入，哪个方法使项目包体积更小？

前提：

由于甲方一而再再而三强调提高项目页面加载速度，所以想通过修改Element Plus的引入方式，看看是否能进一步减小项目包体积，从而提高页面速度。下面将新建两个vue3项目来测试。

---

创建vue3项目

官方链接

cmd在项目文件夹目录下执行语句

npm create vue@latest

选择项目所需即可创建成功

---

完整引入：

官方链接

// main.ts 或者 main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

测试：

在 AboutView.vue 页面添加 button

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- 这里 -->
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
    <!-- 这里 -->
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

打包大小：

按需引入：

官方链接

安装

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

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

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

---

测试代码同上

打包大小：

总结：

按需引入能减少项目包体积

ps：

两个引入都需要安装Element Plus

npm install element-plus --save