Using Baseline to Reduce JavaScript Bundle Size
Leverage browser-native features to eliminate unnecessary dependencies.
1The Cost of Unnecessary Dependencies
The average JavaScript application carries 60-90KB of obsolete libraries. Modern browsers natively support many functions like date formatting, HTTP requests, and array operations. Yet developers rarely update these dependencies. While npm audit checks for security, the question 'Is this library still necessary?' is seldom asked, leaving bloat in projects.
2What is Baseline?
Baseline is a WebDX Community Group project that clearly indicates feature support across Chrome, Edge, Firefox, and Safari. Features are categorized into three states: Limited availability (not in all browsers), Newly available (recently supported everywhere), and Widely available (stable for 30+ months). Developers can check compatibility via webstatus.dev or MDN's Baseline badges.
3Decision Framework for Library Removal
Before removing any library, answer three key questions: 1) Is the native feature safe for your specific audience? 2) What's the real cost of switching? 3) Does the platform feature cover all your use cases? For example, axios offers more than fetch - including interceptors and retry logic. These advanced features might justify keeping the library despite native alternatives.
4Internationalization (Intl) Opportunities
The Intl API makes libraries like timeago.js (1KB), pluralize (2.3KB), and numeral (3.9KB) obsolete. Intl.RelativeTimeFormat produces phrases like '3 hours ago' with localized variations. The numeric: 'auto' parameter generates natural phrases like 'yesterday' instead of '1 day ago'. However, developers must still handle unit selection (seconds/months) manually.
5Number and Date Formatting
Intl.NumberFormat replaces numeral for currency, percentage, and scientific notation formatting. Intl.DateTimeFormat serves as an alternative to luxon/dayjs for date-time operations. For instance, 'en-US' locale produces '12/31/2023' while 'de-DE' yields '31.12.2023'. These features are all Baseline 'Widely available', making them safe for immediate adoption.
6Duration and List Formatting
Intl.DurationFormat generates human-readable phrases like '2 hours 30 minutes', replacing humanize-duration. Intl.ListFormat handles array joining: ['React', 'Vue', 'Svelte'] becomes 'React, Vue, and Svelte'. Both features are Baseline 'Widely available', meaning they're production-ready with full browser support for over 30 months.
7HTTP Request Optimization
The native fetch API can replace axios (4.5KB) for basic requests, but with important caveats. Fetch doesn't automatically parse JSON, has different error handling, and requires AbortController for cancellation. While suitable for simple requests, complex applications using interceptors or retry logic might still need axios's additional functionality.
8Deep Cloning and Array Operations
structuredClone API replaces Lodash's cloneDeep (5.2KB) for JSON-safe objects. For array grouping, Object.groupBy and Map.groupBy methods are now available. However, these features are currently 'Newly available' in Baseline, meaning developers should verify audience browser support before adoption, especially for public-facing applications.
9Modal and Tooltip Libraries
Modern browsers support modal dialogs via the <dialog> element and tooltips via the Popover API. The <dialog> element works with showModal()/close() methods, while Popover API provides automatic layering and ESC key closing. Since browser support is still evolving, polyfills may be necessary for full compatibility across all user devices.
10Temporal API for Date Operations
The upcoming Temporal API aims to replace date-fns/moment.js, but currently only has experimental support in Chrome. The Temporal polyfill weighs 15KB, making existing libraries more efficient for small-scale date operations. Developers should conduct thorough cost-benefit analysis before switching, especially for time-sensitive applications.
11Automating the Audit Process
The web-features npm package programmatically scans dependencies against browser capabilities. Tools like BundlePhobia compare library sizes effectively. Integrating this audit into CI/CD pipelines ensures ongoing optimization. Regular checks prevent new unnecessary dependencies from creeping in as the web platform continues evolving.
12Optimization Benefits
Properly executed, these optimizations can reduce average bundle sizes by 10-15%, significantly improving mobile performance. However, each change requires careful audience analysis and compatibility testing. Starting with small, measurable changes and gradually expanding the optimization scope proves most effective for sustainable performance gains.
Original article: Smashing Magazine — JavaScript Paketlerini Küçültmek için Baseline Kullanımı