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

2024-11-29 18:48:31 +08:00 · 2022-05-22 04:30:57 +08:00 · 2022-05-22 04:30:57 +08:00 · 9f17d58899
commit 9f17d58899
parent 972fefd03b
8 changed files with 67 additions and 55 deletions
--- a/package.json
+++ b/package.json
@ -52,7 +52,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",
--- a/pnpm-lock.yaml
+++ b/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
@ -32,7 +32,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
@ -93,11 +93,11 @@ devDependencies:
  postcss-html: 1.4.1
  postcss-scss: 4.0.4
  sass: 1.52.1
-  stylelint: 14.8.2
-  stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.2
-  stylelint-config-recommended-vue: 1.4.0_wdct7lrbpt3f5qukrrtdrzdofe
-  stylelint-config-standard: 25.0.0_stylelint@14.8.2
-  stylelint-scss: 4.2.0_stylelint@14.8.2
+  stylelint: 14.8.3
+  stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.3
+  stylelint-config-recommended-vue: 1.4.0_qry3c7tpre6jvvuytvffjzlnpe
+  stylelint-config-standard: 25.0.0_stylelint@14.8.3
+  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
@ -1163,8 +1163,8 @@ packages:
    engines: {node: '>=8'}
    dev: true

-  /async-validator/4.0.7:
-    resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==}
+  /async-validator/4.1.1:
+    resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==}
    dev: false

  /async/0.9.2:
@ -2116,7 +2116,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
@ -4701,10 +4701,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
@ -6002,7 +5998,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=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/stylelint-config-html/download/stylelint-config-html-1.0.0.tgz}
    engines: {node: ^12 || >=14}
    peerDependencies:
@ -6010,23 +6006,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-config-recommended: 7.0.0_stylelint@14.8.2
-      stylelint-scss: 4.2.0_stylelint@14.8.2
+      stylelint: 14.8.3
+      stylelint-config-recommended: 7.0.0_stylelint@14.8.3
+      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:
@ -6035,29 +6031,29 @@ packages:
    dependencies:
      postcss-html: 1.4.1
      semver: 7.3.5
-      stylelint: 14.8.2
-      stylelint-config-html: 1.0.0_wdct7lrbpt3f5qukrrtdrzdofe
-      stylelint-config-recommended: 7.0.0_stylelint@14.8.2
+      stylelint: 14.8.3
+      stylelint-config-html: 1.0.0_qry3c7tpre6jvvuytvffjzlnpe
+      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-config-recommended: 7.0.0_stylelint@14.8.2
+      stylelint: 14.8.3
+      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
@ -6067,11 +6063,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:
-    resolution: {integrity: sha512-tjDfexCYfoPdl/xcDJ9Fv+Ko9cvzbDnmdiaqEn3ovXHXasi/hbkt5tSjsiReQ+ENqnz0eltaX/AOO+AlzVdcNA==}
+  /stylelint/14.8.3:
+    resolution: {integrity: sha512-aLpskXwSgFEBYbFRKA/BfuyYMGuXNtn2t5GqoffNPSezvw97x/vVNWcZNF0+cwt+LBjfvyq9/MRE3OjInGRgNA==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
    hasBin: true
    dependencies:
@ -6098,7 +6094,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
--- a/src/elementPlusServer.js
+++ b/src/elementPlusServer.js
@ -0,0 +1,2 @@
+// 误删，该文件用于解决 element plus 在开发环境下按需引入导致页面频繁刷新的问题
+export default function importElementPlus() {}
--- a/src/layout/components/SubSidebar/index.vue
+++ b/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 {
--- a/src/main.js
+++ b/src/main.js
@ -8,9 +8,8 @@ app.use(pinia)
 import router from './router'
 app.use(router)

-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-app.use(ElementPlus)
+import importElementPlus from '@/elementPlusServer'
+importElementPlus(app)

 import globalProperties from '@/util/global.properties'
 globalProperties(app)
--- a/vite.config.js
+++ b/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')
--- a/vite/plugins/components.js
+++ b/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: [
-            ElementPlusResolver()
-        ],
+        resolvers,
        dirs: ['src/components'],
        include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/],
        dts: false
--- a/vite/plugins/index.js
+++ b/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))