NX+Vite+TypeScript路径解析日志冗余问题排查与优化请求

一、禁用[Nx Vite TsPaths]冗余日志 #

方法1：调整NX全局日志级别 #

• 临时生效：构建时直接添加参数降低日志输出

  nx build your-project-name --verbose=false
  

• 持久化配置：修改nx.json中的日志级别，只保留重要输出

  {
    "tasksRunnerOptions": {
      "default": {
        "options": {
          "logLevel": "warn" // 可选"error"，仅显示错误级日志
        }
      }
    }
  }
  

方法2：自定义Vite插件精准屏蔽日志 #

如果不想降低全局日志级别，可通过自定义插件拦截特定日志：

// vite.config.ts
import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-ts-paths.plugin';

export default defineConfig({
  plugins: [
    nxViteTsPaths(),
    {
      name: 'suppress-nx-tspaths-logs',
      buildStart() {
        const originalInfo = console.info;
        console.info = (...args) => {
          if (!args[0]?.toString().includes('[Nx Vite TsPaths]')) {
            originalInfo(...args);
          }
        };
      },
      configureServer(server) {
        const originalLog = server.config.logger.info;
        server.config.logger.info = (msg) => {
          if (!msg.includes('[Nx Vite TsPaths]')) {
            originalLog(msg);
          }
        };
      }
    }
  ]
});

二、优化路径解析与构建速度 #

1. 精简tsconfig路径配置 #

检查tsconfig.json的paths字段，移除重复或无效映射，避免插件重复解析：

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/components/*"]
      // 删除冗余的路径映射项
    }
  }
}

2. 启用Vite依赖预构建 #

在vite.config.ts中开启optimizeDeps，让Vite提前预构建路径相关模块：

export default defineConfig({
  optimizeDeps: {
    include: ['@components/*'],
    esbuildOptions: {
      target: 'esnext' // 加快预构建的编译速度
    }
  }
});

3. 升级NX Vite插件 #

NX 19.1.1对应的@nx/vite可能存在日志冗余的bug，升级到同大版本的最新补丁版本：

npm update @nx/vite --save-dev
# 或使用pnpm/yarn
pnpm update @nx/vite -D

4. 关闭插件调试模式 #

部分版本的nxViteTsPaths支持debug配置，直接关闭调试日志：

nxViteTsPaths({ debug: false })

内容的提问来源于stack exchange，提问作者Nikola.grancharov