优化element plus按需载入时，组件对应的样式文件会导致vite重复重载页面并加载很慢的问题

package.json

@@ -55,7 +55,7 @@
         "postcss-html": "^1.4.1",
         "postcss-scss": "^4.0.4",
         "sass": "^1.52.1",
-        "stylelint": "^14.8.2",
+        "stylelint": "^14.8.3",
         "stylelint-config-recommended-scss": "^6.0.0",
         "stylelint-config-recommended-vue": "^1.4.0",
         "stylelint-config-standard": "^25.0.0",

pnpm-lock.yaml

@@ -11,7 +11,7 @@ specifiers:
   '@vueuse/integrations': ^8.5.0
   axios: ^0.27.2
   dayjs: ^1.11.2
-  element-plus: ^2.2.0
+  element-plus: 2.2.0
   eslint: ^8.16.0
   eslint-plugin-vue: ^9.0.1
   esno: ^0.16.3
@@ -33,7 +33,7 @@ specifiers:
   postcss-scss: ^4.0.4
   qs: ^6.10.3
   sass: ^1.52.1
-  stylelint: ^14.8.2
+  stylelint: ^14.8.3
   stylelint-config-recommended-scss: ^6.0.0
   stylelint-config-recommended-vue: ^1.4.0
   stylelint-config-standard: ^25.0.0
@@ -53,7 +53,7 @@ specifiers:
   vite-plugin-svg-icons: ^2.0.1
   vite-plugin-vue-layouts: ^0.6.0
   vite-plugin-vue-setup-extend: ^0.4.0
-  vue: 3.2.33
+  vue: ^3.2.33
   vue-eslint-parser: ^9.0.2
   vue-router: ^4.0.15
 
@@ -95,11 +95,11 @@ devDependencies:
   postcss-html: 1.4.1
   postcss-scss: 4.0.4
   sass: 1.52.1
-  stylelint: 14.8.2
+  stylelint: 14.8.3
-  stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.2
+  stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.3
-  stylelint-config-recommended-vue: 1.4.0_wdct7lrbpt3f5qukrrtdrzdofe
+  stylelint-config-recommended-vue: 1.4.0_qry3c7tpre6jvvuytvffjzlnpe
-  stylelint-config-standard: 25.0.0_stylelint@14.8.2
+  stylelint-config-standard: 25.0.0_stylelint@14.8.3
-  stylelint-scss: 4.2.0_stylelint@14.8.2
+  stylelint-scss: 4.2.0_stylelint@14.8.3
   svgo: 2.8.0
   unplugin-auto-import: 0.7.2_4xyn6ao5ngwbgzbefoyccvabvi
   unplugin-vue-components: 0.19.5_vite@2.9.9+vue@3.2.33
@@ -1208,8 +1208,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /async-validator/4.0.7:
+  /async-validator/4.1.1:
-    resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==}
+    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
     dev: false
 
   /async/0.9.2:
@@ -2165,7 +2165,7 @@ packages:
       '@types/lodash': 4.14.182
       '@types/lodash-es': 4.17.6
       '@vueuse/core': 8.5.0_vue@3.2.33
-      async-validator: 4.0.7
+      async-validator: 4.1.1
       dayjs: 1.11.2
       escape-html: 1.0.3
       lodash: 4.17.21
@@ -4758,10 +4758,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /normalize-selector/0.2.0:
-    resolution: {integrity: sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=, tarball: normalize-selector/download/normalize-selector-0.2.0.tgz}
-    dev: true
-
   /normalize-wheel-es/1.1.2:
     resolution: {integrity: sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png==}
     dev: false
@@ -6059,7 +6055,7 @@ packages:
     resolution: {integrity: sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=, tarball: style-search/download/style-search-0.1.0.tgz}
     dev: true
 
-  /stylelint-config-html/1.0.0_wdct7lrbpt3f5qukrrtdrzdofe:
+  /stylelint-config-html/1.0.0_qry3c7tpre6jvvuytvffjzlnpe:
     resolution: {integrity: sha1-FyrLmW7kyFToxnD8/3f/DZjTvsI=, tarball: stylelint-config-html/download/stylelint-config-html-1.0.0.tgz}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -6067,23 +6063,23 @@ packages:
       stylelint: '>=14.0.0'
     dependencies:
       postcss-html: 1.4.1
-      stylelint: 14.8.2
+      stylelint: 14.8.3
     dev: true
 
-  /stylelint-config-recommended-scss/6.0.0_stylelint@14.8.2:
+  /stylelint-config-recommended-scss/6.0.0_stylelint@14.8.3:
     resolution: {integrity: sha512-6QOe2/OzXV2AP5FE12A7+qtKdZik7Saf42SMMl84ksVBBPpTdrV+9HaCbPYiRMiwELY9hXCVdH4wlJ+YJb5eig==}
     peerDependencies:
       stylelint: ^14.4.0
     dependencies:
       postcss-scss: 4.0.4
-      stylelint: 14.8.2
+      stylelint: 14.8.3
-      stylelint-config-recommended: 7.0.0_stylelint@14.8.2
+      stylelint-config-recommended: 7.0.0_stylelint@14.8.3
-      stylelint-scss: 4.2.0_stylelint@14.8.2
+      stylelint-scss: 4.2.0_stylelint@14.8.3
     transitivePeerDependencies:
       - postcss
     dev: true
 
-  /stylelint-config-recommended-vue/1.4.0_wdct7lrbpt3f5qukrrtdrzdofe:
+  /stylelint-config-recommended-vue/1.4.0_qry3c7tpre6jvvuytvffjzlnpe:
     resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -6092,29 +6088,29 @@ packages:
     dependencies:
       postcss-html: 1.4.1
       semver: 7.3.5
-      stylelint: 14.8.2
+      stylelint: 14.8.3
-      stylelint-config-html: 1.0.0_wdct7lrbpt3f5qukrrtdrzdofe
+      stylelint-config-html: 1.0.0_qry3c7tpre6jvvuytvffjzlnpe
-      stylelint-config-recommended: 7.0.0_stylelint@14.8.2
+      stylelint-config-recommended: 7.0.0_stylelint@14.8.3
     dev: true
 
-  /stylelint-config-recommended/7.0.0_stylelint@14.8.2:
+  /stylelint-config-recommended/7.0.0_stylelint@14.8.3:
     resolution: {integrity: sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==}
     peerDependencies:
       stylelint: ^14.4.0
     dependencies:
-      stylelint: 14.8.2
+      stylelint: 14.8.3
     dev: true
 
-  /stylelint-config-standard/25.0.0_stylelint@14.8.2:
+  /stylelint-config-standard/25.0.0_stylelint@14.8.3:
     resolution: {integrity: sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==}
     peerDependencies:
       stylelint: ^14.4.0
     dependencies:
-      stylelint: 14.8.2
+      stylelint: 14.8.3
-      stylelint-config-recommended: 7.0.0_stylelint@14.8.2
+      stylelint-config-recommended: 7.0.0_stylelint@14.8.3
     dev: true
 
-  /stylelint-scss/4.2.0_stylelint@14.8.2:
+  /stylelint-scss/4.2.0_stylelint@14.8.3:
     resolution: {integrity: sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==}
     peerDependencies:
       stylelint: ^14.5.1
@@ -6124,11 +6120,11 @@ packages:
       postcss-resolve-nested-selector: registry.nlark.com/postcss-resolve-nested-selector/0.1.1
       postcss-selector-parser: registry.nlark.com/postcss-selector-parser/6.0.6
       postcss-value-parser: registry.nlark.com/postcss-value-parser/4.1.0
-      stylelint: 14.8.2
+      stylelint: 14.8.3
     dev: true
 
-  /stylelint/14.8.2:
+  /stylelint/14.8.3:
-    resolution: {integrity: sha512-tjDfexCYfoPdl/xcDJ9Fv+Ko9cvzbDnmdiaqEn3ovXHXasi/hbkt5tSjsiReQ+ENqnz0eltaX/AOO+AlzVdcNA==}
+    resolution: {integrity: sha512-aLpskXwSgFEBYbFRKA/BfuyYMGuXNtn2t5GqoffNPSezvw97x/vVNWcZNF0+cwt+LBjfvyq9/MRE3OjInGRgNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -6155,7 +6151,6 @@ packages:
       meow: 9.0.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
-      normalize-selector: 0.2.0
       picocolors: 1.0.0
       postcss: 8.4.13
       postcss-media-query-parser: 0.2.3

src/elementPlusServer.js

@@ -0,0 +1,2 @@
+// 误删，该文件用于解决 element plus 在开发环境下按需引入导致页面频繁刷新的问题
+export default function importElementPlus() {}

src/layout/components/SubSidebar/index.vue

@@ -57,7 +57,7 @@ function onSidebarScroll(e) {
     bottom: 0;
     background-color: var(--g-sub-sidebar-bg);
     box-shadow: 10px 0 10px -10px var(--g-box-shadow-color);
-    transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s;
+    transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s;
     &.is-collapse {
         width: 64px;
         .sidebar-logo {

src/main.js

@@ -8,6 +8,9 @@ app.use(pinia)
 import router from './router'
 app.use(router)
 
+import importElementPlus from '@/elementPlusServer'
+importElementPlus(app)
+
 import globalProperties from '@/util/global.properties'
 globalProperties(app)
 

vite.config.js

@@ -21,15 +21,6 @@ export default ({ mode, command }) => {
             scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`)
         }
     })
-    // BUG https://github.com/element-plus/element-plus/issues/4916
-    const optimizeDepsElementPlusIncludes = ['element-plus/es']
-    fs.readdirSync('node_modules/element-plus/es/components').map(dirname => {
-        fs.access(`node_modules/element-plus/es/components/${dirname}/style/css.mjs`, err => {
-            if (!err) {
-                optimizeDepsElementPlusIncludes.push(`element-plus/es/components/${dirname}/style/css`)
-            }
-        })
-    })
     return defineConfig({
         base: './',
         // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
@@ -56,9 +47,34 @@ export default ({ mode, command }) => {
             }
         },
         optimizeDeps: {
-            include: optimizeDepsElementPlusIncludes
+            include: [
+                'element-plus/es',
+                'element-plus/es/components/message/style/css',
+                'element-plus/es/components/notification/style/css',
+                'element-plus/es/components/message-box/style/css'
+            ]
         },
-        plugins: createVitePlugins(env, command === 'build'),
+        plugins: [
+            ...createVitePlugins(env, command === 'build'),
+            // BUG https://github.com/antfu/unplugin-vue-components/issues/361
+            {
+                name: 'dev-auto-import-element-plus',
+                transform(code, id) {
+                    if (command === 'serve' && /src\/elementPlusServer.js$/.test(id)) {
+                        return {
+                            code: `
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+export default function importElementPlus(app) {
+    app.use(ElementPlus);
+}
+`,
+                            map: null
+                        }
+                    }
+                }
+            }
+        ],
         resolve: {
             alias: {
                 '@': path.resolve(__dirname, 'src')

vite/plugins/components.js

@@ -1,11 +1,11 @@
 import components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
-export default function createComponents() {
+export default function createComponents(isBuild) {
+    const resolvers = []
+    isBuild && resolvers.push(ElementPlusResolver())
     return components({
-        resolvers: [
+        resolvers,
-            ElementPlusResolver()
-        ],
         dirs: ['src/components'],
         include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
         dts: false

vite/plugins/index.js

@@ -20,7 +20,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
     vitePlugins.push(createJsx())
     vitePlugins.push(createHtml(viteEnv, isBuild))
     vitePlugins.push(createAutoImport())
-    vitePlugins.push(createComponents())
+    vitePlugins.push(createComponents(isBuild))
     vitePlugins.push(createSetupExtend())
     vitePlugins.push(createSvgIcon(isBuild))
     vitePlugins.push(createMock(viteEnv, isBuild))