refactor: 按需导入

auto-imports.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    ChangeLocal: typeof import('./src/components/set/preference/ChangeLocal.vue')['default']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
+    GeneralSetting: typeof import('./src/components/set/GeneralSetting.vue')['default']
+    PublishIndex: typeof import('./src/components/publish/PublishIndex.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SetIndex: typeof import('./src/components/set/SetIndex.vue')['default']
+  }
+}

package.json

@@ -28,6 +28,8 @@
     "rollup-plugin-livereload": "^2.0.5",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
+    "unplugin-auto-import": "^0.16.2",
+    "unplugin-vue-components": "^0.24.1",
     "vercel": "^29.4.0",
     "vite": "^4.3.2",
     "vite-plugin-html": "^3.2.0",

src/main.ts

@@ -60,7 +60,9 @@ import { AppInstance } from "~/src/appInstance.ts"
   app.provide(InjectKeys.APP_INSTANCE, appInstance)
 
   // ElementPlus
-  app.use(ElementPlus)
+  // 包太大，需要改成按需引入
+  // https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
+  // app.use(ElementPlus)
 
   // 挂载 vue app
   app.mount("#app")

vite.config.ts

@@ -6,6 +6,9 @@ import fg from "fast-glob"
 import { createHtmlPlugin } from "vite-plugin-html"
 import path from "path"
 import commonjs from "@rollup/plugin-commonjs"
+import AutoImport from "unplugin-auto-import/vite"
+import Components from "unplugin-vue-components/vite"
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
 
 const getAppBase = (isSiyuanBuild: boolean, isStaticBuild: boolean): string => {
   if (isSiyuanBuild) {
@@ -42,6 +45,13 @@ export default defineConfig({
   plugins: [
     vue(),
 
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+
     createHtmlPlugin({
       minify: !isDev,
       inject: {
@@ -149,6 +159,21 @@ export default defineConfig({
             // console.log("id=>", id)
             // console.log("dep=>", dep)
             if (dep !== "") {
+              // if (dep === "element-plus") {
+              //   let element_dep = dep
+              //   const componentPath = id
+              //   const componentRegex = /\/node_modules\/([^/]+)\/.*\/components\/([^/]+)/
+              //   const matches = componentPath.match(componentRegex)
+              //
+              //   if (matches !== null) {
+              //     element_dep = matches[2]
+              //     // console.log("element_dep=>", element_dep)
+              //   } else {
+              //     // console.log(`Could not match component name from ${componentPath}`)
+              //   }
+              //
+              //   return "vendor_element_plus_" + element_dep
+              // }
               return "vendor_" + dep
             }
             return "vendor"