From 379b340750eb0d4f7816f5d7c25cbd2983fd33b9 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Mon, 25 Dec 2023 16:27:55 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=90=AF=E5=8A=A8?=
 =?UTF-8?q?=E9=80=9F=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.base                        |  5 +++-
 .env.dev                         |  5 +++-
 .env.gitee                       |  7 ++++--
 .env.pro                         |  5 +++-
 .env.test                        |  5 +++-
 src/App.vue                      |  9 +++++++
 src/plugins/elementPlus/index.ts |  6 +++++
 src/plugins/svgIcon/index.ts     |  2 --
 stylelint.config.js              |  4 ----
 vite.config.ts                   | 41 ++++++++++++++++++++------------
 10 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/.env.base b/.env.base
index 7e2fb8f..7cf8898 100644
--- a/.env.base
+++ b/.env.base
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=development
+VITE_NODE_ENV=development
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -9,3 +9,6 @@ VITE_BASE_PATH=/
 
 # 标题
 VITE_APP_TITLE=ElementAdmin
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
diff --git a/.env.dev b/.env.dev
index 3bec339..68a210d 100644
--- a/.env.dev
+++ b/.env.dev
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/.env.gitee b/.env.gitee
index 37af85b..95279ea 100644
--- a/.env.gitee
+++ b/.env.gitee
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -23,4 +23,7 @@ VITE_OUT_DIR=dist-pro
 VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
-VITE_USE_BUNDLE_ANALYZER=false
\ No newline at end of file
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
\ No newline at end of file
diff --git a/.env.pro b/.env.pro
index 7bff03f..a489e81 100644
--- a/.env.pro
+++ b/.env.pro
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=true
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/.env.test b/.env.test
index 4aa30ad..b545901 100644
--- a/.env.test
+++ b/.env.test
@@ -1,5 +1,5 @@
 # 环境
-NODE_ENV=production
+VITE_NODE_ENV=production
 
 # 接口前缀
 VITE_API_BASE_PATH=
@@ -24,3 +24,6 @@ VITE_APP_TITLE=ElementAdmin
 
 # 是否包分析
 VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git a/src/App.vue b/src/App.vue
index 389960e..4a1c89d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ConfigGlobal } from '@/components/ConfigGlobal'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useDark } from '@vueuse/core'
+// import { ElNotification } from 'element-plus'
 
 const { getPrefixCls } = useDesign()
 
@@ -21,6 +22,14 @@ const isDark = useDark({
 })
 
 isDark.value = appStore.getIsDark
+// ElNotification({
+//   title: '提示',
+//   type: 'warning',
+//   duration: 0,
+//   dangerouslyUseHTMLString: true,
+//   message:
+//     '<div><p><strong>遇事不决，请先查阅常见问题，说不定你能找到相关解答</strong></p><p><a href="https://www.baidu.com" target="_blank">链接地址</a></p></div>'
+// })
 </script>
 
 <template>
diff --git a/src/plugins/elementPlus/index.ts b/src/plugins/elementPlus/index.ts
index 6139e3b..29a7840 100644
--- a/src/plugins/elementPlus/index.ts
+++ b/src/plugins/elementPlus/index.ts
@@ -12,6 +12,12 @@ export const setupElementPlus = (app: App<Element>) => {
     app.use(plugin)
   })
 
+  // 为了开发环境启动更快，一次性引入所有样式
+  if (import.meta.env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'true') {
+    import('element-plus/dist/index.css')
+    return
+  }
+
   components.forEach((component) => {
     app.component(component.name!, component)
   })
diff --git a/src/plugins/svgIcon/index.ts b/src/plugins/svgIcon/index.ts
index b5b7f70..1b11e2d 100644
--- a/src/plugins/svgIcon/index.ts
+++ b/src/plugins/svgIcon/index.ts
@@ -1,3 +1 @@
 import 'virtual:svg-icons-register'
-
-import '@purge-icons/generated'
diff --git a/stylelint.config.js b/stylelint.config.js
index 890b45b..a50d202 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -20,12 +20,8 @@ module.exports = {
     'function-no-unknown': null,
     'no-empty-source': null,
     'named-grid-areas-no-invalid': null,
-    'unicode-bom': 'never',
     'no-descending-specificity': null,
     'font-family-no-missing-generic-family-keyword': null,
-    'declaration-colon-space-after': 'always-single-line',
-    'declaration-colon-space-before': 'never',
-    'declaration-block-trailing-semicolon': null,
     'rule-empty-line-before': [
       'always',
       {
diff --git a/vite.config.ts b/vite.config.ts
index 239ce1f..5ce5181 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -40,21 +40,23 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       }),
       VueJsx(),
       progress(),
-      createStyleImportPlugin({
-        resolves: [ElementPlusResolve()],
-        libs: [
-          {
-            libraryName: 'element-plus',
-            esModule: true,
-            resolveStyle: (name) => {
-              if (name === 'click-outside') {
-                return ''
+      env.VITE_USE_ALL_ELEMENT_PLUS_STYLE === 'false'
+        ? createStyleImportPlugin({
+            resolves: [ElementPlusResolve()],
+            libs: [
+              {
+                libraryName: 'element-plus',
+                esModule: true,
+                resolveStyle: (name) => {
+                  if (name === 'click-outside') {
+                    return ''
+                  }
+                  return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
+                }
               }
-              return `element-plus/es/components/${name.replace(/^el-/, '')}/style/css`
-            }
-          }
-        ]
-      }),
+            ]
+          })
+        : undefined,
       EslintPlugin({
         cache: false,
         include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
@@ -120,7 +122,16 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         }
       },
       rollupOptions: {
-        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined
+        plugins: env.VITE_USE_BUNDLE_ANALYZER === 'true' ? [visualizer()] : undefined,
+        // 拆包
+        output: {
+          manualChunks: {
+            vue: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+            'element-plus': ['element-plus'],
+            'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue'],
+            echarts: ['echarts', 'echarts-wordcloud']
+          }
+        }
       }
     },
     server: {