Optimizing TypeScript Applications for Mobile Performance

{
  "title": "Optimizing TypeScript Applications for Mobile Performance",
  "description": "Implement strategies to enhance the performance of TypeScript applications on mobile devices.",
  "category": "TypeScript Cursor Rules",
  "rules": [
    {
      "id": "ts-mobile-performance-001",
      "name": "Minimize JavaScript Bundle Size",
      "description": "Reduce the initial load time by minimizing the JavaScript bundle size through code splitting and tree shaking.",
      "recommendation": [
        "Implement code splitting to load only essential code upfront and fetch additional code on demand.",
        "Utilize tree shaking to eliminate unused code from the JavaScript bundle."
      ],
      "examples": [
        {
          "bad": "import * as utils from './utils';",
          "good": "import { specificFunction } from './utils';"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-002",
      "name": "Implement Lazy Loading for Non-Critical JavaScript",
      "description": "Defer the loading of non-essential JavaScript until it is needed to improve initial load times.",
      "recommendation": [
        "Use dynamic imports to load modules only when required.",
        "Avoid loading heavy features during the initial page load."
      ],
      "examples": [
        {
          "bad": "import { heavyFeature } from './heavyFeature';",
          "good": "const loadHeavyFeature = async () => { const module = await import('./heavyFeature'); module.init(); };"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-003",
      "name": "Optimize Loops and Iterations",
      "description": "Enhance performance by optimizing loops and iterations in the code.",
      "recommendation": [
        "Cache array length in loops to avoid recalculating it during each iteration.",
        "Use built-in array methods like map, filter, and reduce for better performance."
      ],
      "examples": [
        {
          "bad": "for (let i = 0; i < array.length; i++) { console.log(array[i]); }",
          "good": "const len = array.length; for (let i = 0; i < len; i++) { console.log(array[i]); }"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-004",
      "name": "Use Async/Await Wisely",
      "description": "Optimize asynchronous code to prevent blocking the event loop and improve performance.",
      "recommendation": [
        "Avoid using await inside loops; instead, use Promise.all to run multiple promises concurrently.",
        "Ensure that asynchronous operations do not block the main thread."
      ],
      "examples": [
        {
          "bad": "for (const url of urls) { const response = await fetch(url); process(response); }",
          "good": "const responses = await Promise.all(urls.map(url => fetch(url))); responses.forEach(response => process(response));"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-005",
      "name": "Avoid Unnecessary Type Assertions",
      "description": "Minimize the use of type assertions to maintain type safety and performance.",
      "recommendation": [
        "Let TypeScript infer types automatically whenever possible.",
        "Use type assertions sparingly and only when necessary."
      ],
      "examples": [
        {
          "bad": "const value = someValue as string;",
          "good": "const value: string = someValue;"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-006",
      "name": "Use Interfaces Instead of Classes",
      "description": "Prefer interfaces over classes for type definitions to improve performance.",
      "recommendation": [
        "Use interfaces to define object shapes and avoid unnecessary class instantiation.",
        "Reserve classes for scenarios requiring instantiation and inheritance."
      ],
      "examples": [
        {
          "bad": "class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } }",
          "good": "interface Person { name: string; age: number; }"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-007",
      "name": "Optimize Imports",
      "description": "Reduce bundle size by importing only necessary modules.",
      "recommendation": [
        "Avoid importing entire modules; instead, import only the specific functions or variables needed.",
        "Regularly audit and remove unused imports to keep the codebase clean."
      ],
      "examples": [
        {
          "bad": "import * as utils from './utils';",
          "good": "import { specificFunction } from './utils';"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-008",
      "name": "Use Constants for Immutable Data",
      "description": "Declare variables with const when their values should not change to enable compiler optimizations.",
      "recommendation": [
        "Use const for variables that are not reassigned after their initial assignment.",
        "Reserve let for variables that will be reassigned."
      ],
      "examples": [
        {
          "bad": "let someValue = 10;",
          "good": "const someValue = 10;"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-009",
      "name": "Avoid Deeply Nested Types",
      "description": "Simplify type definitions to improve readability and performance.",
      "recommendation": [
        "Keep type definitions as flat as possible.",
        "Break down complex structures into smaller, more manageable types."
      ],
      "examples": [
        {
          "bad": "type DeeplyNestedType = { a: { b: { c: string; } } }",
          "good": "type FlatType = { a: string; b: string; c: string; }"
        }
      ]
    },
    {
      "id": "ts-mobile-performance-010",
      "name": "Use Memoization",
      "description": "Cache the results of expensive function calls to improve performance.",
      "recommendation": [
        "Implement memoization for functions that perform costly computations.",
        "Use existing libraries or write custom memoization functions as needed."
      ],
      "examples": [
        {
          "bad": "function expensiveFunction(num: number) { // Perform expensive calculation return num * 2; }",
          "good": "const memoize = (fn: Function) => { const cache: { [key: string]: any } = {}; return (...args: any[]) => { const key = JSON.stringify(args); if (cache[key]) { return cache[key]; } const result = fn(...args); cache[key] = result; return result; }; }; const memoizedFunction = memoize(expensiveFunction);"
        }
      ]
    }
  ]
}