perf(projects): 添加unocss配置，添加打包分析插件

.env.production

@@ -1,5 +1,8 @@
 # 是否开启压缩资源
 VITE_COMPRESS_OPEN=N
 
-# gzip | brotliCompress | deflate | deflateRaw
+# 压缩算法 gzip | brotliCompress | deflate | deflateRaw
 VITE_COMPRESS_TYPE=gzip
+
+# 是否开启打包依赖分析
+VITE_VISUALIZER=N

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+stats.html
 
 # Editor directories and files
 .vscode/*

build/plugins/index.ts

@@ -2,6 +2,7 @@ import vue from './vue';
 import compress from './compress';
 import html from './html';
 import unocss from './unocss';
+import visualizer from './visualizer';
 
 /**
  * @description: 设置vite插件配置
@@ -10,10 +11,13 @@ import unocss from './unocss';
  */
 export function setVitePlugins(env) {
   const plugins = [...vue, html(env), unocss];
-
+  // 是否压缩
   if (env.VITE_COMPRESS_OPEN === 'Y') {
     plugins.push(compress(env));
   }
-
+  // 是否依赖分析
+  if (env.VITE_VISUALIZER === 'Y') {
+    plugins.push(visualizer);
+  }
   return plugins;
 }

build/plugins/unocss.ts

@@ -1,3 +1,6 @@
 import Unocss from 'unocss/vite'; // https://github.com/unocss/unocss
+import { presetUno, presetAttributify, presetIcons } from 'unocss';
 
-export default Unocss();
+export default Unocss({
+  presets: [presetUno(), presetAttributify(), presetIcons()],
+});

build/plugins/visualizer.ts

@@ -0,0 +1,6 @@
+import { visualizer } from 'rollup-plugin-visualizer'; // https://github.com/btd/rollup-plugin-visualizer
+export default visualizer({
+  gzipSize: true,
+  brotliSize: true,
+  open: true,
+});

package.json

@@ -49,6 +49,7 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
+    "rollup-plugin-visualizer": "^5.7.1",
     "typescript": "^4.6.4",
     "unocss": "^0.45.5",
     "vite": "^3.0.0",

src/layouts/BasicLayout/index.vue

@@ -12,7 +12,7 @@
   <router-view></router-view>
 </template>
 
-<script>
+<script lang="ts">
 export default {};
 </script>
 

src/types/env.d.ts

@@ -7,6 +7,8 @@ interface ImportMetaEnv {
   readonly VITE_HTTP_PROXY?: 'Y' | 'N';
   /** 是否开启打包压缩 */
   readonly VITE_COMPRESS?: 'Y' | 'N';
+  /** 是否开启打包依赖分析 */
+  readonly VITE_VISUALIZER?: 'Y' | 'N';
   /** 压缩算法类型 */
   readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
   /** hash路由模式 */

src/views/test/test1.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump test1.</div>
+  <div text-center bg-green-500 rounded c-rose>I prove that you have made the jump test1.</div>
-  <div class="c-yellow">Uno css</div>
+  <div text-center c-yellow>Uno css</div>
 </template>
 
 <script setup lang="ts">

src/views/test/test2.vue

@@ -1,5 +1,10 @@
 <template>
   <div style="text-align: center">I prove that you have made the jump test2.</div>
+  <button
+    class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700 border-none cursor-pointer"
+  >
+    Click me
+  </button>
 </template>
 
 <script setup lang="ts">

vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig(({ command, mode }: ConfigEnv) => {
     },
     server: {
       host: '0.0.0.0',
-      port: 5200,
+      port: 3000,
       open: false,
       proxy: createViteProxy(env),
     },