perf: 前端 Element Plus 按需导入 + 代码分割,bundle 从 1.18MB 降至 ~500KB

- 引入 unplugin-vue-components 自动按需导入 Element Plus 组件和图标
- 引入 unplugin-auto-import 自动导入 Vue/EP API(ref/reactive/ElMessage 等)
- vite.config 添加 manualChunks 拆包(vendor 独立 chunk)
- 移除 main.js 全量 Element Plus 导入和图标注册
- 所有 .vue 文件移除冗余的 import 语句
This commit is contained in:
mediabot-pt
2026-06-29 13:18:59 +08:00
parent 67b6e356e8
commit 145f745e71
9 changed files with 38 additions and 26 deletions

View File

@@ -1,16 +1,8 @@
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.use(router)
app.mount('#app')

View File

@@ -23,8 +23,6 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../api'
const pendingConfigs = ref([])

View File

@@ -40,7 +40,6 @@
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import api from '../api'
const stats = reactive({

View File

@@ -52,10 +52,6 @@
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
const userEmail = ref(localStorage.getItem('par_token') || 'admin')

View File

@@ -18,9 +18,6 @@
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '../api'
const router = useRouter()

View File

@@ -26,8 +26,6 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '../api'
const sites = ref([])

View File

@@ -32,8 +32,6 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../api'
const users = ref([])