When to Replace Chrome-like Defaults in Your Stack: Choosing Browsers, Engines, and Runtime Targets for TS Apps

When defaulting to “Chrome-like” is costing you time and users

Every time you scaffold a TypeScript project you inherit a set of invisible defaults: a tsconfig target, a browserslist entry, and an assumption that the runtime behaves like the latest Chrome/V8. Those defaults speed development — until they don't. You ship features that fail in Safari, Cloudflare Workers, or low-end Android devices. Tests pass locally on Chromium but fail in production. Build performance suffers because of unnecessary polyfills. This article gives a practical way to decide when and how to replace Chrome-like defaults with choices that reflect your users, runtimes, and performance goals in 2026.

Why this matters now (2025–2026 context)

By late 2025 and early 2026, the landscape around browsers and JS runtimes is more diverse than many teams assume. Alternative browsers and privacy-first engines (including small mobile-focused browsers like Puma and wider adoption of on-device AI) are changing behavioral assumptions. Server and edge runtimes — Node.js LTS variants, Deno, Bun, and V8-isolate-based platforms — expose different supported syntax and global APIs. Tooling has matured: bundlers like esbuild and SWC offer faster transforms but fewer built-in polyfill strategies, while Babel + core-js remains the go-to for usage-based polyfills.

Core decision criteria: When to deviate from Chrome-like defaults

Replace defaults when your constraints or goals dictate it. Use these practical, measurable criteria:

• User telemetry: If >95% of active users are on evergreen Chromium-based browsers and modern Android/iOS versions, you can target modern ES builds aggressively.
• Regulated environments: Enterprises with locked-down browsers (legacy IE/EdgeHTML or old WebViews) force you to support older targets and polyfills.
• Runtime diversity: If you deploy to Node → Cloudflare Workers → browser, pick the narrowest common denominator or produce multiple outputs.
• Performance budget: Reducing polyfills & downleveling reduces bundle size and CPU cost on low-end devices.
• Library vs app: Libraries should aim for compatibility (broad targets); apps can favor performance and ship modern bundles.

Key technical levers and what they affect

Understand which settings change outputs and runtime behavior:

• tsconfig.target / module: Controls the ES syntax emitted (classes, async/await, modules). It does not add polyfills.
• browserslist: Drives many tools to determine which polyfills and transforms are needed. It is the single source of truth for modern front-end chains.
• Polyfill strategy: Global polyfills (core-js bundles), usage-based (Babel useBuiltIns: 'usage'), or runtime providers (polyfill.io).
• Bundler toolchain: esbuild and SWC are fast but don't inject polyfills automatically; Babel + core-js does. Rollup/Vite configuration affects code splitting and module format output.
• Testing matrix: Browser engines (V8, SpiderMonkey, JavaScriptCore) differ in feature rollouts; end-to-end and CI must include representative engines.

Practical patterns: Multi-target builds vs single-target builds

There are two common strategies to reconcile compatibility and performance:

1) Multi-target builds (recommended for public-facing apps)

Produce a modern bundle (ES2022/ESNext modules, no polyfills) and a legacy bundle (ES5 + polyfills). Serve the appropriate bundle using a server-side redirect or the <script type="module"> / nomodule pattern. This gives best UX: modern browsers download smaller bundles, legacy browsers still work.

Pros: optimal performance for modern users. Cons: more CI complexity and build time.

2) Single-target conservative build (recommended for enterprise or limited CI)

Choose the lowest common denominator you must support (e.g., ES2015/ES5 with polyfills) and compile everything to that target. Simpler pipeline but larger bundles for modern users.

tsconfig presets you can copy and adapt

Below are vetted presets for common scenarios. Use them as starting points — change libs, module resolution, and strictness to match your project.

A: Modern web app (users on evergreen browsers, best performance)

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["DOM", "ES2022"],
    "moduleResolution": "bundler",
    "skipLibCheck": true,
    "strict": true,
    "useDefineForClassFields": true,
    "noEmit": false,
    "sourceMap": true,
    "noImplicitReturns": true
  }
}

Pair with a browserslist like:

["browserslist"]
last 2 chrome versions
last 2 firefox versions
last 2 safari versions
not dead

Tooling notes: use esbuild/SWC/Vite with provision for polyfills only for very specific APIs (e.g., Intl.Locale, WebCrypto edge cases). Avoid core-js unless telemetry requires it.

B: Legacy-support app (wide compatibility)

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "lib": ["DOM", "ES5", "ES2015.Promise"],
    "moduleResolution": "Node",
    "downlevelIteration": true,
    "skipLibCheck": true,
    "strict": false,
    "noEmit": false,
    "sourceMap": true
  }
}

browserslist:

["browserslist"]
> 0.5%
last 5 versions
IE 11

Tooling notes: use Babel with core-js and useBuiltIns: 'entry' or 'usage' to add polyfills. Expect larger bundles and more test coverage across engines.

C: Server (Node) target

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "lib": ["ES2020"],
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

Pick target based on the Node LTS you run in production. If your servers run Node 20+, ES2020/ES2022 are safe. If you expect to run in Bun or Deno, validate runtime compatibility — Bun historically tracked V8 features differently.

D: Edge functions / Workers

Edge runtimes (Cloudflare Workers, Fastly, Deno Deploy) typically support modern JS but have restrictions on some globals or modules. A conservative option:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["WebWorker", "ES2020"],
    "moduleResolution": "bundler",
    "noEmit": false
  }
}

Tooling notes: produce ESM output and avoid Node-only APIs. Test in the actual worker runtime locally using platform emulators or CI runners.

Polyfills: Stop guessing, start measuring

Polyfills are the biggest source of surprise bloat. Follow this checklist:

1. Collect telemetry: Use client-side feature detection telemetry for things like Intl.Locale, BigInt, or Temporal usage. Don’t assume feature prevalence.
2. Prefer usage-based polyfills: If you need them, configure Babel with core-js and useBuiltIns: 'usage' to only include used polyfills.
3. Consider on-demand polyfill services: polyfill.io can reduce initial bundle size but adds network dependency.
4. Use feature-detection fallbacks: Where possible, implement graceful degradation instead of polyfilling heavy APIs.

Testing and validation: Engines you should include in CI

Chromium is not enough. At minimum, include:

• Chromium-based browser (for fastest path and V8 behaviors)
• Safari / WebKit (JavaScriptCore differences matter)
• Firefox (SpiderMonkey differences can show spec edge cases)
• Representative mobile WebView (Android System WebView or iOS WKWebView)

Use Playwright to run headless tests across these engines in CI. For server and edge code, run unit tests on Node LTS and in the actual edge emulator.

Performance trade-offs and how to measure them

Don't optimize for bundle size blindly. Optimize for perceived performance and real device CPU. Key metrics:

• First Contentful Paint (FCP) and Time to Interactive (TTI)
• CPU work on slow devices (use WebPageTest and mobile device labs)
• Bundle size / transfer size per target

Experiment with swapping your browserslist and tsconfig target: generate a modern build and a legacy build, then compare bundle size and TTI on mid-range Android (3–4 years old). The delta tells you whether multi-target complexity is worth it.

Real-world examples and case studies

Two short case studies from 2025–2026 adopters illustrate the trade-offs.

Case study: Consumer SaaS — switched to multi-target builds

Problem: A SaaS team shipped features that worked in Chrome but failed in Safari and older iOS WebViews. They were using default tsconfig target ES2017 and no browserslist.

Action: They added Telemetry for unsupported feature occurrences, introduced browserslist, and switched to a multi-target pipeline: ES2022 module build + ES5 legacy build with usage-based core-js polyfills. Tests added Safari in CI.

Result: 30% reduction in bundle size for modern users and a 90% drop in production errors tied to syntax/polyfill mismatches.

Case study: Internal enterprise app — consolidated to a conservative single build

Problem: Employees used the app in corporate-controlled browsers and older Windows machines. The team had brittle runtime assumptions.

Action: They standardized on an ES5 target and used Babel + core-js with useBuiltIns: 'entry'. They reduced build complexity and stopped shipping multiple artifacts.

Result: Simpler CI, fewer support tickets, slightly larger bundles but acceptable within the agreed performance SLA.

Checklist: How to decide in a sprint

1. Gather user agent and feature telemetry (1–2 days).
2. Map runtimes (browsers, Node/Bun/Deno, edge) you must support.
3. Choose strategy: modern-only, multi-target, or conservative single target.
4. Draft tsconfig and browserslist presets (use the templates above).
5. Update build tooling (esbuild/SWC for speed; Babel for polyfills where needed).
6. Update CI to run tests on the required engines.
7. Measure bundle size and real-device metrics and iterate.

2026 trends and predictions you should plan for

Plan for these shifts that affect target choices:

• On-device AI browsers: Browsers with local LLMs (examples like Puma and other mobile-focused entrants) emphasize privacy and sometimes change extension and JS execution policies. Feature-detection and user consent flows will matter for heavy client-side AI code.
• Edge runtimes proliferate: More workloads will run in V8 isolates and WASI-like environments; expect stricter module and global API constraints.
• Bundlers keep optimizing for modern targets: esbuild/SWC will continue to push defaults for ES2022/ESNext, making multi-target pipelines easier but requiring explicit polyfill management.
• Library consumers expect dual packages: Libraries that publish both modern (module/exports) and legacy (cjs) bundles will be the norm.

Rule of thumb: Default to modern where your users allow it. Produce legacy only where telemetry or contracts require it.

Actionable takeaways

• Use browserslist as the single source of truth for browser targets. Keep it in package.json and reference it from Babel, autoprefixer, and any tool that supports it.
• Set tsconfig.target to the syntax level you want emitted — it does not polyfill runtime features.
• Adopt a multi-target build for public apps when you have diverse user agents; use module/nomodule or server negotiation to serve the right bundles.
• Prefer usage-based polyfills via Babel + core-js when you must support legacy engines; avoid blanket polyfill bundles.
• Include WebKit and at least one mobile WebView in CI to catch real-world incompatibilities early.

Final checklist before you change defaults

• Do you have user telemetry? If not, collect it.
• Can you afford increased build complexity for a smaller bundle? Measure it.
• Have you validated your runtime APIs in target environments (workers, mobile browsers)?
• Is your test matrix covering V8, SpiderMonkey, and JavaScriptCore?

Conclusion & call-to-action

Chrome-like defaults are a useful starting point, but they should not be your production policy. In 2026, with more varied runtimes and on-device browser innovations like Puma changing the landscape, the right choice is an intentional one: align targets with telemetry, split builds when it saves real user time, and choose polyfills conservatively. Use the tsconfig presets above as a baseline, integrate browserslist into your pipeline, and add cross-engine CI to avoid surprises.

Ready to audit your stack? Run a 1-week experiment: collect UA telemetry, build a modern and a legacy bundle, and run both on a mid-tier Android device, Safari, and an edge emulator. If you want a tailored tsconfig + build pipeline audit for your app, reach out or try our free checklist to map your compatibility surface.

Related Reading

• Influencer Stunts vs Scientific Claims: How to Read Cleanser Advertising Like an Expert
• How to Claim Outage Credits — A Traveler’s Guide for International SIMs
• Stadium Soundtracks: How Composer Catalog Deals and Musical AI Could Change Game-Day Playlists
• From Auction Houses to Pet Marketplaces: Protecting Pedigrees and Papers When Selling Rare Breeds
• Automate Emergency Rebooking Using Self-Learning Models