Performance Optimization and Build Tools

// tsconfig.json - Production optimized
{
  "compilerOptions": {
    // Speed optimizations
    "incremental": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    
    // Fast transpilation
    "isolatedModules": true,
    "moduleResolution": "bundler",
    
    // Output settings
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    
    // Type checking (keep strict for quality)
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    
    // Build caching
    "tsBuildInfoFile": "./dist/.tsbuildinfo",
    
    // Module resolution
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    
    // Output
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "**/*.test.ts",
    "**/*.spec.ts",
    "dist",
    "coverage"
  ]
}

// Run with diagnostics
tsc --diagnostics

// Output example:
Files:              450
Lines:              125000
Nodes:              780000
Identifiers:        245000
Symbols:            198000
Types:              67000
Instantiations:     142000
Memory used:        385MB
I/O read:           0.82s
I/O write:          0.15s
Parse time:         1.45s
Bind time:          0.78s
Check time:         3.21s
Emit time:          0.65s
Total time:         6.09s

// Extended diagnostics for more detail
tsc --diagnostics --extendedDiagnostics

// Analyze slow files
tsc --generateTrace ./trace
// Opens Chrome DevTools Performance tab

// For very large codebases (>100k LOC)
{
  "compilerOptions": {
    // Maximum speed settings
    "skipLibCheck": true,
    "incremental": true,
    "isolatedModules": true,
    
    // Reduce type checking scope
    "noEmit": true,  // Let bundler handle transpilation
    
    // Assume changes only affect direct dependencies
    "assumeChangesOnlyAffectDirectDependencies": true,
    
    // Faster but less accurate
    "disableSolutionSearching": true,
    "disableReferencedProjectLoad": true
  },
  // Split into smaller projects
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" },
    { "path": "./packages/utils" }
  ]
}

// Watch mode optimizations
{
  "watchOptions": {
    // Use native file system events (fastest)
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    
    // Fallback options for compatibility
    "fallbackPolling": "dynamicPriority",
    
    // Exclude from watching
    "excludeDirectories": ["**/node_modules", "**/dist"],
    "excludeFiles": ["**/*.test.ts"]
  }
}

// Root tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/utils" },
    { "path": "./packages/api" },
    { "path": "./packages/web" }
  ]
}

// packages/core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "incremental": true,
    "tsBuildInfoFile": "./dist/.tsbuildinfo"
  },
  "include": ["src/**/*"]
}

// packages/api/tsconfig.json (depends on core and utils)
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../core" },
    { "path": "../utils" }
  ]
}

// packages/web/tsconfig.json (depends on api, core, utils)
{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../api" },
    { "path": "../core" },
    { "path": "../utils" }
  ]
}

// package.json scripts
{
  "scripts": {
    // Build all projects with dependencies
    "build": "tsc -b",
    
    // Build specific project
    "build:core": "tsc -b packages/core",
    "build:api": "tsc -b packages/api",
    "build:web": "tsc -b packages/web",
    
    // Watch mode with project references
    "dev": "tsc -b --watch",
    "dev:api": "tsc -b packages/api --watch",
    
    // Clean all build outputs
    "clean": "tsc -b --clean",
    
    // Force rebuild everything
    "rebuild": "tsc -b --force",
    
    // Verbose build output
    "build:verbose": "tsc -b --verbose",
    
    // Dry run (show what would be built)
    "build:dry": "tsc -b --dry"
  }
}

// Build with NPM workspaces (parallel execution)
npm run build --workspaces

// Selective builds based on changes
// Only rebuild changed packages and their dependents
tsc -b packages/core packages/api

// Benefits:
// - Faster builds (only changed projects)
// - Parallel compilation (independent projects)
// - Proper dependency tracking
// - Cached builds (.tsbuildinfo)
// - Better IDE performance

// tsconfig.json - for tree-shakeable output
{
  "compilerOptions": {
    "module": "ESNext",           // ES modules for tree shaking
    "target": "ES2020",
    "declaration": true,
    "declarationMap": true,
    "moduleResolution": "bundler",
    
    // Important for tree shaking
    "isolatedModules": true,      // Each file standalone
    "esModuleInterop": true,
    "preserveConstEnums": false   // Inline const enums
  }
}

// package.json
{
  "name": "my-library",
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",     // ES module entry
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",  // ES module
      "require": "./dist/index.cjs", // CommonJS
      "types": "./dist/index.d.ts"
    }
  },
  "sideEffects": false  // Enable aggressive tree shaking
}

// src/index.ts - Use named exports
export { funcA } from './moduleA';
export { funcB } from './moduleB';
export { funcC } from './moduleC';

// Avoid default exports for better tree shaking
// ❌ Bad for tree shaking
export default { funcA, funcB, funcC };

// ✅ Good for tree shaking
export { funcA, funcB, funcC };

// Consumer code - only imports what's needed
import { funcA } from 'my-library';  // Only funcA is bundled

// webpack.config.js
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  // ... webpack config
  
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: true,
      generateStatsFile: true,
      statsFilename: 'bundle-stats.json'
    })
  ],
  
  optimization: {
    usedExports: true,  // Mark unused exports
    sideEffects: true,  // Respect package.json sideEffects
    concatenateModules: true,  // Scope hoisting
    minimize: true,
    
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        },
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    }
  }
};

// package.json scripts
{
  "scripts": {
    "analyze": "webpack --mode production --profile --json > stats.json && webpack-bundle-analyzer stats.json",
    "build:analyze": "cross-env ANALYZE=true webpack --mode production"
  }
}

// Using source-map-explorer
npm install -D source-map-explorer

// package.json
{
  "scripts": {
    "analyze:sourcemap": "source-map-explorer 'dist/**/*.js'"
  }
}

// webpack.config.js
const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,  // Skip type checking (done by plugin)
              experimentalWatchApi: true,  // Faster watching
              configFile: 'tsconfig.json'
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  
  plugins: [
    // Type checking in separate process
    new ForkTsCheckerWebpackPlugin({
      async: false,  // Wait for type checking in production
      typescript: {
        configFile: path.resolve(__dirname, 'tsconfig.json'),
        diagnosticOptions: {
          semantic: true,
          syntactic: true
        }
      }
    })
  ],
  
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  
  // Performance optimizations
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  
  optimization: {
    moduleIds: 'deterministic',
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

// webpack.dev.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',  // Fast source maps
  
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          // Optional: Use thread-loader for parallel processing
          {
            loader: 'thread-loader',
            options: {
              workers: 2,
              workerParallelJobs: 50
            }
          },
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true,
              happyPackMode: true,  // Required with thread-loader
              experimentalWatchApi: true
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: true,  // Don't wait in dev mode (faster)
      typescript: {
        configFile: 'tsconfig.json',
        memoryLimit: 4096  // Increase memory for large projects
      }
    })
  ],
  
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true
  },
  
  devServer: {
    hot: true,
    port: 3000,
    historyApiFallback: true
  }
};

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';
import path from 'path';

export default defineConfig({
  plugins: [
    react({
      // Fast Refresh for React
      fastRefresh: true,
      // Babel options if needed
      babel: {
        parserOpts: {
          plugins: ['decorators-legacy']
        }
      }
    }),
    
    // Type checking plugin
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"'
      },
      overlay: {
        initialIsOpen: false,  // Don't auto-open error overlay
        position: 'br'  // Bottom right
      }
    })
  ],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils')
    }
  },
  
  build: {
    target: 'es2020',
    outDir: 'dist',
    sourcemap: true,
    
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns']
        }
      }
    },
    
    // Optimize chunk size
    chunkSizeWarningLimit: 1000,
    
    // Minification with esbuild (faster)
    minify: 'esbuild'
  },
  
  server: {
    port: 3000,
    open: true,
    hmr: {
      overlay: true
    }
  },
  
  // Optimize dependencies
  optimizeDeps: {
    include: ['react', 'react-dom'],
    exclude: ['@vite/client', '@vite/env']
  }
});

// tsconfig.json for Vite
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    
    // Bundler mode (Vite-specific)
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,  // Required for esbuild
    "noEmit": true,  // Vite handles transpilation
    
    // Type checking
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    // Path mapping
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },
    
    // React
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

// tsconfig.node.json - for Vite config files
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

// package.json scripts
{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",  // Type check before build
    "preview": "vite preview",
    "type-check": "tsc --noEmit",
    "type-check:watch": "tsc --noEmit --watch"
  }
}

// esbuild.config.js
const esbuild = require('esbuild');

// Build configuration
esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  
  // TypeScript settings
  platform: 'node',
  target: 'es2020',
  format: 'esm',
  
  // Optimizations
  minify: true,
  sourcemap: true,
  treeShaking: true,
  splitting: true,
  
  // External dependencies (not bundled)
  external: ['react', 'react-dom'],
  
  // Loaders for different file types
  loader: {
    '.ts': 'ts',
    '.tsx': 'tsx',
    '.png': 'file',
    '.svg': 'dataurl'
  },
  
  // Define environment variables
  define: {
    'process.env.NODE_ENV': '"production"'
  },
  
  // Watch mode
  watch: false,
  
  // Logging
  logLevel: 'info'
}).catch(() => process.exit(1));

// package.json scripts
{
  "scripts": {
    "build": "npm run type-check && node esbuild.config.js",
    "type-check": "tsc --noEmit",
    "dev": "node esbuild.config.js --watch",
    "dev:check": "concurrently \"npm run type-check:watch\" \"npm run dev\""
  }
}

// Using esbuild programmatically
import * as esbuild from 'esbuild';

// Development with watch
const ctx = await esbuild.context({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outdir: 'dist',
  sourcemap: true,
  platform: 'node',
  target: 'node18'
});

await ctx.watch();
console.log('Watching...');

// Serve mode (dev server)
const { host, port } = await ctx.serve({
  servedir: 'public',
  port: 3000
});
console.log(`Server running at http://${host}:${port}`);

// .swcrc
{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "development": false,
        "refresh": true  // Fast Refresh
      },
      "legacyDecorator": true,
      "decoratorMetadata": true
    },
    "target": "es2020",
    "loose": false,
    "externalHelpers": false,
    "keepClassNames": true
  },
  "module": {
    "type": "es6",
    "strict": false,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  },
  "minify": false,
  "sourceMaps": true
}

// Using SWC with Node.js
// Install: npm i -D @swc/core @swc/cli
{
  "scripts": {
    "build": "swc src -d dist",
    "build:watch": "swc src -d dist --watch",
    "type-check": "tsc --noEmit"
  }
}

// Using SWC with Webpack
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              }
            }
          }
        },
        exclude: /node_modules/
      }
    ]
  }
};

// Using esbuild-loader with Webpack
module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',
          target: 'es2020',
          tsconfigRaw: require('./tsconfig.json')
        }
      }
    ]
  },
  plugins: [
    // Use esbuild for minification too (faster)
    new ESBuildMinifyPlugin({
      target: 'es2020',
      css: true
    })
  ]
};

// Build time comparison for medium project (50k LOC)

// TypeScript Compiler (tsc)
// Time: ~45s
tsc --project tsconfig.json

// Babel + @babel/preset-typescript
// Time: ~35s (no type checking)
babel src --out-dir dist --extensions ".ts,.tsx"

// ts-loader (Webpack)
// Time: ~40s
webpack --mode production

// ts-loader + transpileOnly + fork-ts-checker
// Time: ~25s (parallel type checking)
webpack --mode production

// esbuild-loader (Webpack)
// Time: ~5s (no type checking)
webpack --mode production

// esbuild (standalone)
// Time: ~2s (no type checking)
node esbuild.config.js

// SWC
// Time: ~3s (no type checking)
swc src -d dist

// Vite (esbuild)
// Dev server start: <1s
// Production build: ~5s
vite build

// Recommendation:
// Development: Vite or esbuild with separate tsc --noEmit --watch
// Production: esbuild/SWC + tsc --noEmit in CI pipeline
// Type safety: Always run tsc --noEmit for type checking