feat: use unplugin to minize element-plus size (#381)

close #380

.gitignore

@@ -50,3 +50,5 @@ public/upload/**
 # package-lock.json
 yarn.lock
 pnpm-lock.yaml
+auto-imports.d.ts
+components.d.ts

package-lock.json

@@ -56,11 +56,14 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.41",
         "prettier": "^3.3.3",
+        "rollup-plugin-visualizer": "^5.12.0",
         "shx": "^0.3.4",
         "simple-git-hooks": "^2.11.1",
         "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4",
         "unocss": "^0.62.2",
+        "unplugin-auto-import": "^0.18.2",
+        "unplugin-vue-components": "^0.27.4",
         "vite": "^5.4.2",
         "vite-plugin-node-polyfills": "^0.22.0",
         "vite-plugin-vue-devtools": "^7.3.9",
@@ -913,7 +916,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -10693,6 +10696,106 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmmirror.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.12.0.tgz",
+      "integrity": "sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmmirror.com/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/roughjs": {
       "version": "4.6.6",
       "resolved": "https://registry.npmmirror.com/roughjs/-/roughjs-4.6.6.tgz",
@@ -10821,6 +10924,12 @@
         "node": "^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "dev": true
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
@@ -11323,6 +11432,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-2.1.0.tgz",
+      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
+      "dev": true,
+      "dependencies": {
+        "js-tokens": "^9.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-9.0.0.tgz",
+      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+      "dev": true
+    },
     "node_modules/strnum": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/strnum/-/strnum-1.0.5.tgz",
@@ -11877,6 +12004,48 @@
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
       "dev": true
     },
+    "node_modules/unimport": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmmirror.com/unimport/-/unimport-3.11.1.tgz",
+      "integrity": "sha512-DuB1Uoq01LrrXTScxnwOoMSlTXxyKcULguFxbLrMDFcE/CO0ZWHpEiyhovN0mycPt7K6luAHe8laqvwvuoeUPg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0",
+        "acorn": "^8.12.1",
+        "escape-string-regexp": "^5.0.0",
+        "estree-walker": "^3.0.3",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.11",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "scule": "^1.3.0",
+        "strip-literal": "^2.1.0",
+        "unplugin": "^1.12.2"
+      }
+    },
+    "node_modules/unimport/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unimport/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -11945,6 +12114,91 @@
         }
       }
     },
+    "node_modules/unplugin": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.12.3.tgz",
+      "integrity": "sha512-my8DH0/T/Kx33KO+6QXAqdeMYgyy0GktlOpdQjpagfHKw5DrD0ctPr7SHUyOT3g4ZVpzCQGt/qcpuoKJ/pniHA==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.12.1",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.18.2",
+      "resolved": "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.18.2.tgz",
+      "integrity": "sha512-Dwb3rAic75harVBrVjwiq6H24PT+nBq2dpxV5BH8NNI6sDFaTytvP+iyo4xy7prQbR3r5K6nMs4f5Wp9PE4g8A==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.0",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.10",
+        "minimatch": "^9.0.5",
+        "unimport": "^3.9.0",
+        "unplugin": "^1.11.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.27.4",
+      "resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.27.4.tgz",
+      "integrity": "sha512-1XVl5iXG7P1UrOMnaj2ogYa5YTq8aoh5jwDPQhemwO/OrXW+lPQKDXd1hMz15qxQPxgb/XXlbgo3HQ2rLEbmXQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.10",
+        "@rollup/pluginutils": "^5.1.0",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.6",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.11",
+        "minimatch": "^9.0.5",
+        "mlly": "^1.7.1",
+        "unplugin": "^1.12.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
@@ -12886,6 +13140,21 @@
       "resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmmirror.com/whatwg-url/-/whatwg-url-5.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "build:only": "vite build",
     "build:h5-netlify": "cross-env SERVER_ENV=NETLIFY vite build",
     "build:cli": "npm run build && npm run shx rm -rf md-cli/dist && npm run shx rm -rf dist/**/*.map && npm run shx cp -r dist md-cli/ && cd md-cli && npm run pack",
+    "build:analyze": "cross-env ANALYZE=true vite build",
     "preview": "npm run build && vite preview",
     "release:cli": "node ./bin/release.js",
     "lint": "eslint . --fix",
@@ -64,11 +65,14 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
+    "rollup-plugin-visualizer": "^5.12.0",
     "shx": "^0.3.4",
     "simple-git-hooks": "^2.11.1",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "unocss": "^0.62.2",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.2",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-vue-devtools": "^7.3.9",

src/element/index.js

@@ -1,11 +1,11 @@
-import ElementPlus, { ElLoading, ElMessage } from 'element-plus'
+import { ElLoading, ElMessage } from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
 export default {
   install(app) {
-    app.use(ElementPlus, { size: `default` })
+    // app.use(ElementPlus, { size: `default` })
 
     app.config.globalProperties.$loading = ElLoading.service
     app.config.globalProperties.$message = ElMessage

vite.config.ts

@@ -6,6 +6,10 @@ import vue from '@vitejs/plugin-vue'
 import UnoCSS from 'unocss/vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import { visualizer } from 'rollup-plugin-visualizer'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -24,6 +28,16 @@ export default defineConfig({
         // fs: 'memfs',
       },
     }),
+    process.env.ANALYZE === `true` && visualizer({
+      emitFile: true,
+      filename: `stats.html`,
+    }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
   ],
   resolve: {
     alias: {