The Great Unbundling: How Modern Web Standards and "Baseline" Are Letting Developers Delete Thousands of Lines of Code

By the Web Engineering Desk

For the better part of the last decade, front-end web development has operated under an implicit rule: If you need a feature, there is a package for it. Whether it was parsing relative dates, formatting complex currencies, locking background scrolls during a modal, or executing deep object clones, developers instinctively reached for the command line to run npm install.

Over time, these accumulated dependencies calcified within package.json files. They did their jobs, the continuous integration pipelines passed, and teams moved on. But while the developer ecosystem remained comfortable with its tooling habits, modern web browsers underwent a structural renaissance. The gap between what required a third-party library and what the native web platform can handle natively has narrowed dramatically.

Today, a typical mid-sized JavaScript application carries between 60KB and 90KB (minified and gzipped) of redundant dependencies that modern browsers now handle out-of-the-box. As engineering teams face increasing pressure to optimize Core Web Vitals, accelerate load times on mobile devices, and reduce supply-chain security vulnerabilities, a new movement is emerging: auditing dependencies against the web platform’s "Baseline" cadence to systematically shed code weight.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

Main Facts: The Shifting Boundary of Browser Capabilities

The core premise of modern web auditing is simple: libraries that were essential in 2018 are often entirely redundant today. Features previously locked behind heavy npm packages—such as internationalization, network fetching utilities, native popups, and utility functions—have been standardized, implemented across engine architectures (Chromium, Firefox, and WebKit), and shipped directly to billions of end-user devices.

According to web performance engineers, this "unbundling" trend is driven by several converging factors:

  • Native Feature Maturity: The rapid evolution of the Intl namespace, the Popover API, CSS Anchor Positioning, and structured cloning primitives.
  • The "Baseline" Standard: A cross-industry initiative providing clear definitions of browser feature availability.
  • The Cost of Bloat: A heightened awareness of JavaScript parse and execution times, particularly on constrained mobile hardware in emerging markets.

Rather than looking at dependencies one by one, performance experts advocate for auditing by functional "clusters." These clusters—encompassing internationalization, HTTP communications, UI primitives, and data manipulation utilities—represent the highest concentrations of redundant code in modern applications.


Chronology: The Evolution from Polyfill Culture to Native Standardization

To understand how web development arrived at this juncture, it is helpful to review the timeline of browser capability evolution and standardization frameworks:

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine
  • The Polyfill Era (Pre-2020): JavaScript ecosystems relied heavily on external libraries to patch inconsistent browser behaviors, missing syntax, and absent APIs. moment.js, lodash, and heavy UI wrapper libraries were standard inclusions in nearly every project boilerplate.
  • The Rise of Modern Tooling (2020–2022): As ES6+ standard adoption stabilized, libraries shrank into specialized packages (such as dayjs and modular Lodash imports). However, significant gaps remained in areas like DOM positioning, deep cloning, and relative time formatting.
  • The Introduction of "Baseline" (WebDX Community Group): Formed to bring clarity to web platform interoperability, the WebDX Community Group introduced "Baseline." This initiative categorizes features into clear states—Newly available (supported across major engines for less than 30 months) and Widely available (supported across major engines for more than 30 months)—giving developers the confidence to adopt native features without risky guesswork.
  • The Modern Unbundling Movement (2024–Present): With the recent standardization of advanced APIs like Object.groupBy, structuredClone, the Popover API, and CSS Anchor Positioning, engineering organizations are beginning to execute systematic dependency audits to reduce payload sizes.

Supporting Data: Bundle Mathematics and Platform Realities

To quantify the impact of native platform adoption, one must examine the bundle mathematics across common dependency clusters.

1. Internationalization (The Highest-Yield Cluster)

Historically, developers relied on packages like timeago.js, pluralize, numeral, and humanize-duration to format text. Today, the native Intl namespace covers these use cases with robust, localized precision:

  • Relative Time: Intl.RelativeTimeFormat (Baseline Widely available) replaces libraries that compute timestamps like "3 hours ago" or "yesterday."
  • Numbers and Lists: Intl.NumberFormat and Intl.ListFormat handle currency, compact notation (e.g., "1.2M"), and Oxford comma array joining natively.
  • The Yield: Implementing these native APIs allows teams to drop roughly 14 KB gzipped of production dependencies instantly.

2. HTTP Clients vs. The Fetch API

While libraries like axios (17 KB gzipped) and superagent (19 KB gzipped) offer robust developer ergonomics, native fetch combined with AbortController and AbortSignal.timeout() now covers standard GET and POST workflows natively. While advanced features like request interceptors and automatic retries still require custom architecture or library usage, applications executing standard API calls can save upwards of 17 KB gzipped by transitioning to a thin native wrapper.

3. UI Primitives and Accessibility

Complex UI libraries historically solved heavy accessibility hurdles, including focus management, viewport positioning, and screen shielding. Today, three native platform features handle these requirements:

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine
  • The <dialog> Element: Provides native modal rendering in the browser’s top layer, handles Escape key dismissals, manages focus trapping, and automatically renders a ::backdrop pseudo-element. Combined with CSS rules like body:has(dialog:modal) overflow: hidden; , it replaces modal libraries and scroll-lock plugins.
  • The Popover API & Anchor Positioning: Standardized light-dismiss panels and CSS-based anchor positioning eliminate the need for heavy tooltip libraries (such as tippy.js, which bundles Popper positioning logic).
  • The Yield: Transitioning away from redundant UI helper packages removes approximately 24 KB gzipped while improving native accessibility defaults.

4. Utility Functions (Lodash and Beyond)

Deep cloning and array grouping no longer require external utilities:

  • Grouping: Object.groupBy and Map.groupBy (Baseline Newly available) remove the need for lodash.groupby.
  • Cloning: structuredClone (Baseline Widely available) securely handles deep copies of Dates, Maps, Sets, and circular references without relying on lodash.clonedeep or dangerous JSON.parse(JSON.stringify()) hacks.
  • Set Operations: Modern JavaScript Set objects now natively support intersection, union, difference, and other relational methods.
  • The Yield: Dropping these redundant utility packages saves 8 KB gzipped or more, depending on scoping and tree-shaking efficacy.

Official Responses and Industry Guidelines: A Sustainable Decision Framework

Despite the clear benefits of reducing bundle sizes, industry experts caution against blind, automated deletions. The WebDX Community Group and leading platform architects recommend a disciplined decision framework before removing any dependency from a project’s package.json:

  1. Verify Baseline Status Against Target Audiences: Developers must evaluate whether a native feature is safe for their actual users, not just abstract standards. While B2B enterprise dashboards populated by modern browser users can adopt "Newly available" features immediately, public-facing applications with long-tail device distributions must factor in progressive enhancement or conditional polyfilling.
  2. Calculate Real Swap Costs: Dropping a library can sometimes backfire if the required native polyfill is heavier than the original dependency (a notable consideration with emerging date-time libraries like Temporal and its associated polyfills).
  3. Audit Actual Feature Usage: A library often performs dozens of utility functions, whereas an application may only utilize a single method. Checking actual usage ensures that developers do not overlook edge cases (such as request interceptors in HTTP clients or prototype retention in deep cloning).

Implications: The Future of Web Engineering and Supply Chain Hygiene

The shift toward native platform capabilities carries profound implications for the future of software development:

  • Reduced Supply Chain Vulnerabilities: Every dependency removed from a project represents a reduced attack surface for software supply-chain attacks, malicious package injections, and transitive vulnerability alerts (npm audit fatigue).
  • Performance Gains on Constrained Devices: Cutting 60KB to 90KB of gzipped JavaScript significantly reduces script parse and compile times, directly benefiting users on mobile devices or constrained network connections.
  • A Change in Developer Mindset: The engineering culture is slowly pivoting away from dependency maximalism toward a platform-first mentality. Rather than asking “What package should I install?”, developers are increasingly asking “Can the browser handle this already?”

As web standards continue to evolve—with upcoming platform capabilities in motion—regular quarterly dependency audits are poised to become standard operating procedure for professional engineering teams worldwide.

By Nana Wu