配置脚本scripts时使用`--noEmit`和`--skipLibCheck‘参数

zzz

在Vue项目中，配置脚本`scripts`时使用`--noEmit`和`--skipLibCheck`参数可以跳过类型检查，加快vitebuild的构建过程，避免不必要的输出和库检查，优化开发效率。
通过跳过不必要的类型检查来提升构建速度——是Vue.js项目性能优化的一个常见且有效的手段。
--noEmit 和 --skipLibCheck 是 TypeScript 编译器 (tsc) 的命令行参数，而不是 Vite 或 vite build 的直接参数。
1. 参数解析：tsc vs vite
  --skipLibCheck
    作用：跳过对 .d.ts（类型声明文件，如 node_modules 中的库文件）的类型检查。这能显著减少类型检查所需的时间，因为第三方库的类型定义通常很复杂且已经经过测试。
    适用场景：在运行 tsc --noEmit 进行类型检查时使用。Vite 本身在开发服务器和构建过程中不会使用这个参数，因为它不直接调用 tsc 做类型检查。
  --noEmit
    作用：指示 TypeScript 编译器（tsc）只进行类型检查，不生成任何输出文件（如 .js 或 .d.ts 文件）。
    适用场景：专门用于验证类型是否正确。这在开发阶段或作为 CI/CD 管道中的一个步骤非常有用，确保代码质量，同时又不会产生不必要的文件。
2. 在 Vue + Vite 项目中的正确配置和优化

1. A.优化 tsc 类型检查(用于独立验证) ---- 在package.json 的 scripts 中，我们通常会配置一个命令来单独运行类型检查。
   
2. {
   
3. "scripts": {
   
4. "dev": "vite", // Vite 开发服务器，类型错误不会阻塞进程
   
5. "build": "vue-tsc --noEmit && vite build", // 先类型检查，再构建
   
6. "build:fast": "vite build", // 快速构建，不进行严格类型检查
   
7. "type-check": "vue-tsc --noEmit --skipLibCheck", // 优化的类型检查命令
   
8. "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   
9. }
   
10. }
    
11. vue-tsc: 这是一个专门用于 Vue 单文件组件（.vue）的命令行 TypeScript 检查器，基于 tsc。它支持 tsc 的所有参数。
    
12. build 脚本：&& 表示顺序执行。先运行 vue-tsc --noEmit 确保类型完全正确，如果类型错误，构建过程会中止。这是一种严格的质量保证方式，但会稍微增加构建时间。
    
13. type-check 脚本：这里我们明确使用了 --skipLibCheck 来跳过库文件的检查，大大加快了类型检查的速度。你可以运行 npm run build 来快速检查项目本身的类型错误。
    
14. build:fast 脚本：直接运行 vite build ，完全依赖 Vite 自身的转译流程，速度最快，但不会在控制台抛出类型错误（类型错误可能被隐藏）。

复制代码

1. B. 优化 Vite 构建速度----Vite的构建熟读优化主要在于vite.config.ts
   
2. // vite.config.ts
   
3. import { defineConfig } from 'vite'
   
4. import vue from '@vitejs/plugin-vue'
   
5. 
   
6. // https://vitejs.dev/config/
   
7. export default defineConfig({
   
8. plugins: [vue()],
   
9. build: {
   
10. // 优化构建产物的大小和性能
    
11. minify: 'esbuild', // 使用 esbuild 进行最小化，速度更快
    
12. // rollup 配置
    
13. rollupOptions: {
    
14. // 确保外部化处理那些你不想打包进库的依赖
    
15. external: [],
    
16. // https://rollupjs.org/configuration-options/
    
17. output: {
    
18. // 代码分割策略
    
19. manualChunks: undefined, // 可以在此配置分包策略以优化缓存
    
20. }
    
21. }
    
22. },
    
23. // 虽然不直接是 --skipLibCheck，但 esbuild 处理类型时非常快
    
24. esbuild: {
    
25. // 如果需要，可以在构建时丢弃 console.log 等
    
26. drop: ['console', 'debugger'],
    
27. },
    
28. })
    
29. Vite 在构建时使用 esbuild 进行转译和压缩，其速度本身就远快于 tsc。因此，Vite 构建过程的“快”主要来自于 esbuild 和 rollup 的高效，而不是通过跳过类型检查。

复制代码