perf: 优化启动速度

kailong321200875 · Dec 25, 2023 · 379b340 · 379b340
1 parent 3a5db42
commit 379b340
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
+VITE_USE_BUNDLE_ANALYZER=false
+
+# 是否全量引入element-plus样式
+VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1 @@
 import 'virtual:svg-icons-register'
-
-import '@purge-icons/generated'
diff --git 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
@@ -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: {