【性能优化】UnoCSS替代windicss,Windi CSS导致vite变慢

build/vite/plugin/index.ts

@@ -3,13 +3,13 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 import purgeIcons from 'vite-plugin-purge-icons';
-import windiCSS from 'vite-plugin-windicss';
+import UnoCSS from 'unocss/vite';
+import { presetTypography, presetUno } from 'unocss';
+
 import VitePluginCertificate from 'vite-plugin-mkcert';
-//update-begin-author:liusq date:2023-06-06 for: [issues/555]开发环境，vscode断点调试，文件或行数对不上
+//[issues/555]开发环境，vscode断点调试，文件或行数对不上
 import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
-//update-end-author:liusq date:2023-06-06 for: [issues/555]开发环境，vscode断点调试，文件或行数对不上
 import { configHtmlPlugin } from './html';
-import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configCompressPlugin } from './compress';
 import { configStyleImportPlugin } from './styleImport';
@@ -17,9 +17,9 @@ import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 import { configSvgIconsPlugin } from './svgSprite';
-//预编译插件vite3不好使了
-import OptimizationPersist from 'vite-plugin-optimize-persist'
-import PkgConfig from 'vite-plugin-package-config'
+// //预编译加载插件(不支持vite3作废)
+// import OptimizationPersist from 'vite-plugin-optimize-persist';
+// import PkgConfig from 'vite-plugin-package-config';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
@@ -37,8 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     }),
   ];
 
-  // vite-plugin-windicss
-  vitePlugins.push(windiCSS());
+  vitePlugins.push(UnoCSS({ presets: [presetUno(), presetTypography()] }));
 
   // @vitejs/plugin-legacy
   VITE_LEGACY && isBuild && vitePlugins.push(legacy());
@@ -72,12 +71,10 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     // 文件gzip压缩 rollup-plugin-gzip
     vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE));
 
-    // vite-plugin-pwa
-    vitePlugins.push(configPwaConfig(viteEnv));
   }
 
-  //预编译插件【解决vite首屏加载慢问题】vite-plugin-theme —— vite3不好使了
-  vitePlugins.push(PkgConfig());
-  vitePlugins.push(OptimizationPersist());
+  // //vite-plugin-theme【预编译加载插件，解决vite首次打开界面加载慢问题】
+  // vitePlugins.push(PkgConfig());
+  // vitePlugins.push(OptimizationPersist());
   return vitePlugins;
 }

package.json

@@ -161,7 +161,7 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "@rys-fe/vite-plugin-theme": "^0.8.6",
     "vite-plugin-vue-setup-extend-plus": "^0.1.0",
-    "vite-plugin-windicss": "^1.8.7",
+    "unocss": "^0.55.3",
     "vue-eslint-parser": "^8.3.0",
     "vue-tsc": "^0.33.9"
   },

src/design/entry.css

@@ -0,0 +1,168 @@
+* > .enter-x:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(1),
+* > .-enter-x:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-x:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(2),
+* > .-enter-x:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-x:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(3),
+* > .-enter-x:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-x:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(4),
+* > .-enter-x:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-x:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-x:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-x:nth-child(5),
+* > .-enter-x:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-x-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+* > .enter-y:nth-child(1) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(1) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(1),
+* > .-enter-y:nth-child(1) {
+  z-index: 9;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+* > .enter-y:nth-child(2) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(2) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(2),
+* > .-enter-y:nth-child(2) {
+  z-index: 8;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.2s;
+}
+* > .enter-y:nth-child(3) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(3) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(3),
+* > .-enter-y:nth-child(3) {
+  z-index: 7;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.3s;
+}
+
+* > .enter-y:nth-child(4) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(4) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(4),
+* > .-enter-y:nth-child(4) {
+  z-index: 6;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.4s;
+}
+
+* > .enter-y:nth-child(5) {
+  transform: translateX(50px);
+}
+* > .-enter-y:nth-child(5) {
+  transform: translateX(-50px);
+}
+
+* > .enter-y:nth-child(5),
+* > .-enter-y:nth-child(5) {
+  z-index: 5;
+  opacity: 0;
+  animation: enter-y-animation 0.4s ease-in-out 0.3s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.5s;
+}
+
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/design/index.less

@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'ant/index.less';
 @import './theme.less';
+@import './entry.css';
 
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;
@@ -46,3 +47,10 @@ svg,
 span {
   outline: none !important;
 }
+
+// 保持 和 windi 一样的全局样式，减少升级带来的影响
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

src/main.ts

@@ -1,9 +1,5 @@
+import 'uno.css';
 import '/@/design/index.less';
-// 注册 windi
-import 'virtual:windi-base.css';
-import 'virtual:windi-components.css';
-import 'virtual:windi-utilities.css';
-// import 'virtual:windi-devtools';
 // 注册图标
 import 'virtual:svg-icons-register';
 import App from './App.vue';

windi.config.ts

@@ -1,74 +0,0 @@
-import { defineConfig } from 'vite-plugin-windicss';
-import { primaryColor } from './build/config/themeConfig';
-
-export default defineConfig({
-  darkMode: 'class',
-  plugins: [createEnterPlugin()],
-  theme: {
-    extend: {
-      zIndex: {
-        '-1': '-1',
-      },
-      colors: {
-        primary: primaryColor,
-      },
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-        '2xl': '1600px',
-      },
-    },
-  },
-});
-
-/**
- * Used for animation when the element is displayed
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
- */
-function createEnterPlugin(maxOutput = 8) {
-  const createCss = (index: number, d = 'x') => {
-    const upd = d.toUpperCase();
-    return {
-      [`*> .enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(50px)`,
-      },
-      [`*> .-enter-${d}:nth-child(${index})`]: {
-        transform: `translate${upd}(-50px)`,
-      },
-      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
-        'z-index': `${10 - index}`,
-        opacity: '0',
-        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
-        'animation-fill-mode': 'forwards',
-        'animation-delay': `${(index * 1) / 10}s`,
-      },
-    };
-  };
-  const handler = ({ addBase }) => {
-    const addRawCss = {};
-    for (let index = 1; index < maxOutput; index++) {
-      Object.assign(addRawCss, {
-        ...createCss(index, 'x'),
-        ...createCss(index, 'y'),
-      });
-    }
-    addBase({
-      ...addRawCss,
-      [`@keyframes enter-x-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateX(0)',
-        },
-      },
-      [`@keyframes enter-y-animation`]: {
-        to: {
-          opacity: '1',
-          transform: 'translateY(0)',
-        },
-      },
-    });
-  };
-  return { handler };
-}