feat(vite-plugins): 使用 consola 替换 console.log 以增强日志输出

vite-plugins/02.unplugin-auto-import.ts

@@ -1,8 +1,8 @@
 import type { ConfigEnv, PluginOption } from 'vite';
 
 import AutoImport from 'unplugin-auto-import/vite';
-import Components from 'unplugin-vue-components/vite';
 import Icons from 'unplugin-icons/vite';
+import Components from 'unplugin-vue-components/vite';
 
 import { VueRouterAutoImports } from 'unplugin-vue-router';
 import { createUtils4uAutoImports } from 'utils4u/auto-imports';
@@ -23,6 +23,7 @@ import IconsResolver from 'unplugin-icons/resolver';
 import { VantResolver } from '@vant/auto-import-resolver';
 // <<<<<
 
+import consola from 'consola';
 import fs from 'node:fs';
 import path from 'node:path';
 
@@ -33,7 +34,7 @@ function _getNaiveUiComponentNames() {
     const webTypes = JSON.parse(fs.readFileSync(webTypesPath, 'utf-8'));
     const components = webTypes.contributions.html['vue-components'];
     const componentNames = components.map((component: { name: string }) => component.name);
-    console.log('naive-ui components count (from web-types.json):', componentNames.length);
+    consola.info('naive-ui components count (from web-types.json):', componentNames.length);
     return componentNames;
   }
 
@@ -45,11 +46,11 @@ function _getNaiveUiComponentNames() {
     const regex = /^\s+(N\w+):/gm;
     const matches = [...volarContent.matchAll(regex)];
     const componentNames = matches.map((match) => match[1]);
-    console.log('naive-ui components count (from volar.d.ts):', componentNames.length);
+    consola.info('naive-ui components count (from volar.d.ts):', componentNames.length);
     return componentNames;
   }
 
-  console.warn('Could not find naive-ui component metadata files');
+  consola.warn('Could not find naive-ui component metadata files');
   return [];
 }
 

vite-plugins/09.vite-plugin-fake-server.ts

@@ -1,10 +1,11 @@
+import { consola } from 'consola';
 import type { ConfigEnv, PluginOption } from 'vite';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
 // https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
 
 export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
-  if (_configEnv.mode === 'test') {
+  if (_configEnv.mode !== 'development') {
-    console.log('fake server plugin disabled in test mode');
+    consola.info('fake server plugin disabled in test mode');
     return [];
   }
   return vitePluginFakeServer({

vite.config.ts

@@ -1,14 +1,12 @@
-import { fileURLToPath, URL } from 'node:url';
+import consola from 'consola';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL, URL } from 'node:url';
 import type { ManualChunkMeta, PreRenderedAsset } from 'rollup';
+import { glob } from 'tinyglobby';
 import { createViteProxy } from 'utils4u/vite';
 import { defineConfig, loadEnv, type ConfigEnv, type PluginOption } from 'vite';
 import { optimizeDeps } from './vite.config.optimizeDeps';
 
-import path from 'node:path';
-import { pathToFileURL } from 'node:url';
-import { glob } from 'tinyglobby';
-import consola from 'consola';
-
 async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]> {
   const plugins: PluginOption[] = [];
 
@@ -81,6 +79,8 @@ export default defineConfig(async (configEnv) => {
   return {
     base: env.VITE_APP_BASE,
     build: {
+      // minify: false, // 默认：	'terser'
+
       sourcemap: env.VITE_APP_BUILD_SOURCE_MAP === 'true',
       rollupOptions: {
         /* onwarn: (warning, warn) => {
@@ -90,10 +90,11 @@ export default defineConfig(async (configEnv) => {
           if (warning.code === 'EVAL' && warning.id?.includes('node_modules/protobufjs')) return;
           warn(warning);
         }, */
+
         output: {
           // Keep hashed file names predictable across entry, chunk, and asset outputs.
-          entryFileNames: '_entry/[name].[hash].js',
+          // entryFileNames: '_entry/[name].[hash].js',
-          chunkFileNames: '_chunk/[name].[hash].js',
+          // chunkFileNames: '_chunk/[name].[hash].js',
           // https://cn.rollupjs.org/configuration-options/#output-assetfilenames
           assetFileNames(chunkInfo: PreRenderedAsset) {
             const names = chunkInfo.names;
@@ -119,81 +120,42 @@ export default defineConfig(async (configEnv) => {
 
           // https://www.npmjs.com/package/utils4u/v/2.19.2?activeTab=code
           manualChunks: (id: string, _meta: ManualChunkMeta) => {
-            if (id.includes('node_modules')) {
+            if (!id.includes('node_modules')) return;
-              // 处理 pnpm 的特殊路径结构
+
-              let packageName;
+            // 处理 pnpm 的特殊路径结构
-              if (id.includes('.pnpm')) {
+            let packageName;
-                // pnpm 路径: .pnpm/naive-ui@2.43.1_vue@3.5.22/node_modules/naive-ui/...
+            if (id.includes('.pnpm')) {
-                const pnpmMatch = id.match(/\.pnpm\/(.+?)@/);
+              // pnpm 路径: .pnpm/naive-ui@2.43.1_vue@3.5.22/node_modules/naive-ui/...
-                if (pnpmMatch) {
+              const pnpmMatch = id.match(/\.pnpm\/(.+?)@/);
-                  packageName = pnpmMatch[1];
+              if (pnpmMatch) {
-                }
+                packageName = pnpmMatch[1];
-              } else {
-                // 普通路径: node_modules/lodash/...
-                const normalMatch = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)\//);
-                if (normalMatch) {
-                  packageName = normalMatch[1];
-                }
               }
+            } else {
+              // 普通路径: node_modules/lodash/...
+              const normalMatch = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)\//);
+              if (normalMatch) {
+                packageName = normalMatch[1];
+              }
+            }
 
-              if (packageName) {
+            if (packageName) {
-                // 根据包名分组
+              // 根据包名分组
-                if (packageName.includes('consola')) {
+              if (['consola', 'lodash', '@juggle+resize-observer'].includes(packageName)) {
-                  return 'consola';
+                return 'lib-vendor';
-                }
+              }
-                if (packageName.includes('naive-ui')) {
+              if (['naive-ui', 'vueuc'].includes(packageName)) {
-                  return 'naive-ui';
+                return 'lib-naive-ui';
-                }
+              }
-                if (packageName.includes('lodash')) {
+              if (
-                  return 'lodash';
+                ['primelocale', 'primevue', '@primeuix'].some((name) => packageName!.includes(name))
-                }
+              ) {
-                if (packageName.includes('@juggle+resize-observer')) {
+                return 'lib-primevue';
-                  return 'resize-observer';
+              }
-                }
+              if (['vue', 'vue-router', 'pinia', 'vue-demi', 'vue-i18n'].includes(packageName)) {
-                // if (packageName.includes('date-fns')) {
+                return 'lib-vue-vendor';
-                //   return 'date-fns';
-                // }
-                if (
-                  ['primelocale', 'primevue', '@primeuix'].some((name) =>
-                    packageName!.includes(name),
-                  )
-                ) {
-                  return 'primevue';
-                }
-                // console.log('packageName :>> ', packageName);
-                // console.log('id :>> ', id);
-                if (['vue', 'vue-router', 'pinia', 'vue-demi', 'vue-i18n'].includes(packageName)) {
-                  return 'vue-vendor';
-                }
-
-                // return 'vendor';
               }
             }
           },
-          // // Split key dependency groups to improve long-term caching.
-          // manualChunks: (id) => {
-          //   if (!id.includes('node_modules')) return;
-          //   if (
-          //     id.includes('node_modules/vue') ||
-          //     id.includes('node_modules/@vue/') ||
-          //     id.includes('node_modules/vue-router')
-          //   ) {
-          //     return 'vue-vendor';
-          //   }
-          //   if (id.includes('pinia') || id.includes('vue-i18n')) {
-          //     return 'state-i18n';
-          //   }
-          //   if (id.includes('naive-ui')) {
-          //     return 'naive-ui';
-          //   }
-          //   if (id.includes('primevue')) {
-          //     return 'primevue';
-          //   }
-          //   if (id.includes('@vueuse')) {
-          //     return 'vueuse';
-          //   }
-          //   return 'vendor';
-          // },
         },
       },
     },