优化 TypeScript 编译性能 - Nest.js 的经验分享

前端

2023-09-02 09:23:49

优化 TypeScript 编译性能的妙招

TypeScript 作为 JavaScript 的超集，深受开发者青睐，因为它能协助识别和解决潜在错误，增强代码重用性。然而，它的编译过程往往耗时费力，尤其对于大型项目而言。

Nest.js 团队的优化之道

Nest.js 团队匠心独运，运用一系列技术和最佳实践，成功优化了 TypeScript 编译性能：

提前编译 (AOT) ：AOT 技术将 TypeScript 代码预编译为 JavaScript 代码，大幅缩短运行时编译时间，提升应用程序效能。
代码生成器 ：Nest.js 团队运用代码生成器生成重复代码，如实体类和数据传输对象 (DTO)。这不仅节约开发时间，更减少了冗余。
优化构建配置 ：他们对构建配置进行了精妙调整，包括调配内存、启用并行构建等，以提速构建过程。
缓存：通过缓存编译结果，Nest.js 团队减少了重复编译的次数，从而提高了编译性能。

开发者专属优化建议

除上述技术外，Nest.js 团队还分享了一些实用的建议，助开发者优化 TypeScript 编译性能：

使用最新 TypeScript 版本 ：TypeScript 团队持续发布新版本，其中往往包含性能优化。
增量编译模式 ：TypeScript 的增量编译模式只编译有变动的文件，节省编译时间。
源映射 ：源映射让开发者能在编译后的 JavaScript 代码中定位对应的 TypeScript 代码，便于调试。
类型检查模式 ：TypeScript 的类型检查模式能检测代码中的类型错误，减少运行时错误，提升应用程序稳定性。

代码示例：启用 AOT 编译

在 tsconfig.json 中添加：

"compilerOptions": {
  "target": "es2015",
  "module": "commonjs",
  "outDir": "./dist",
  "sourceMap": true,
  "declaration": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "noImplicitAny": false,
  "removeComments": true,
  "importHelpers": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "incremental": true,
  "skipLibCheck": true,
  "strict": true,
  "resolveJsonModule": true,
  "enableIvy": true,
  "strictPropertyInitialization": false,
  "noEmitOnError": false,
  "moduleResolution": "node",
  "lib": ["es2015", "es2020"],
  "target": "es5",
  "module": "esnext",
  "moduleResolution": "node14",
  "declaration": false,
  "sourceMap": false,
  "inlineSourceMap": false,
  "inlineSources": false,
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "skipLibCheck": true,
  "downlevelIteration": true,
  "forceConsistentCasingInFileNames": true,
  "newLine": "lf",
  "strictNullChecks": false,
  "noUnusedLocals": false,
  "noUnusedParameters": false,
  "noImplicitReturns": true,
  "noFallthroughCasesInSwitch": true,
  "allowUnreachableCode": false,
  "allowUnusedLabels": false,
  "noEmptyFunctions": false,
  "noImplicitAny": false,
  "target": "es5",
  "strictPropertyInitialization": false,
  "noImplicitAny": false,
  "esModuleInterop": true,
  "noEmitOnError": true,
  "allowJs": true,
  "baseUrl": "./",
  "jsx": "preserve",
  "rootDir": "./src",
  "outDir": "./dist/out-tsc",
  "composite": true,
  "declaration": false,
  "sourceMap": false,
  "declarationMap": false,
  "inlineSources": false,
  "inlineSourceMap": false,
  "incremental": true,
  "removeComments": false,
  "noEmit": false,
  "importHelpers": true,
  "assumeChangesOnlyAffectDirectDependencies": true,
  "skipDefaultLibCheck": true,
  "lib": ["es5", "dom"],
  "moduleResolution": "node14",
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  "forceConsistentCasingInFileNames": true,
  "newLine": "lf",
  "noFallthroughCasesInSwitch": true,
  "strictNullChecks": false,
  "noImplicitReturns": true,
  "allowUnreachableCode": false,
  "downlevelIteration": false,
  "isolatedModules": true
}