perf(element-ui): import Element Plus components as needed

package.json

@@ -72,6 +72,7 @@
     "ts-jest": "^26.5.4",
     "typescript": "^4.1.3",
     "vite": "^2.1.5",
+    "vite-plugin-style-import": "^0.9.2",
     "vue-jest": "^5.0.0-alpha.7",
     "vue-tsc": "^0.0.15"
   }

src/main.ts

@@ -1,15 +1,18 @@
 import { createApp } from 'vue'
-import ElementPlus from 'element-plus'
-import App from './App.vue'
+import { ElButton, ElCard, ElLoading } from 'element-plus'
 
+import App from './App.vue'
 import router from './router/index'
 import { key, store } from './store'
 
-import 'element-plus/lib/theme-chalk/index.css'
 import './style/basic.styl'
 
-const app = createApp(App)
-app.use(router)
-app.use(store, key)
-app.use(ElementPlus)
-app.mount('#app')
+createApp(App)
+  .use(router)
+  .use(store, key)
+
+  // 按需载入 Element Plus
+  .use(ElButton)
+  .use(ElCard)
+  .use(ElLoading)
+  .mount('#app')

vite.config.ts

@@ -1,11 +1,30 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import styleImport from 'vite-plugin-style-import'
 // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
 import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // 按需载入 Element Plus
+    styleImport({
+      libs: [
+        {
+          libraryName: 'element-plus',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: (name) => {
+            return `element-plus/lib/theme-chalk/${name}.css`
+          },
+          resolveComponent: (name) => {
+            return `element-plus/lib/${name}`
+          }
+        }
+      ]
+    })
+  ],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录