How Baseline Can Help You Reduce JavaScript Bundle Size
Leverage browser-native features to minimize dependencies.
1The Burden of Unnecessary Dependencies
Modern web applications often suffer from bloated bundle sizes due to unnecessary dependencies. For instance, date and number formatting are now natively supported by browsers. However, many teams continue to use outdated libraries instead of updating their dependencies. This negatively impacts application performance and user experience.
2What is Baseline?
Baseline is a project developed by the WebDX Community Group. Its primary goal is to determine how safely web features can be used across major browsers (Chrome, Edge, Firefox, Safari). Features are classified into three states: 'Limited availability', 'Newly available', and 'Widely available'. This classification helps developers understand which features can be safely used.
3Questions to Ask Before Removing Dependencies
Before removing a library, three critical questions must be answered: 1) Is the native feature safe for your audience? 2) What is the cost of this change? 3) Does the platform feature cover your real use case? These questions are key to safely removing dependencies.
4Gains with Internationalization (Intl)
Browser features under the Intl namespace render many small libraries obsolete. For example, timeago.js provides date formatting functions, but Intl.RelativeTimeFormat offers this natively. Similarly, libraries like numeral and pluralize can be replaced with Intl.NumberFormat and Intl.PluralRules.
5Time Formatting with RelativeTimeFormat
Intl.RelativeTimeFormat converts timestamps into phrases like '3 hours ago'. This feature is classified as 'Widely available' by Baseline. For instance, the 'numeric: auto' option produces more natural phrases like 'yesterday' instead of '1 day ago'. This significantly enhances user experience.
6Number Formatting with NumberFormat
Intl.NumberFormat formats numbers according to local conventions. This feature eliminates the need for libraries like numeral. For example, currencies or percentages can be easily formatted. This reduces bundle size while improving application performance.
7Plural Formatting with PluralRules
Intl.PluralRules handles plural formatting functions. This feature reduces the need for libraries like pluralize. For instance, phrases like '1 book' and '2 books' can be easily generated. This is particularly advantageous for international applications.
8List Joining with ListFormat
Intl.ListFormat handles list joining functions. This feature eliminates the need for libraries like list-joining helpers. For example, phrases like 'apple, pear, and banana' can be easily generated. This provides more natural text in user interfaces.
9Time Operations with Temporal
Temporal is a new API for date and time operations. This API reduces the need for libraries like moment.js. However, Temporal is not yet supported by all browsers. Therefore, using this feature may require adding a polyfill, which could increase bundle size.
10HTTP Requests with Fetch
The Fetch API provides a native solution for HTTP requests. This feature reduces the need for libraries like axios. However, features like interceptors and request cancellation offered by axios must be reimplemented with fetch. This can create additional work for developers.
11Modals and Tooltips
Browsers offer native features for modals and tooltips. These features reduce the need for libraries like react-modal. However, these features are not yet fully supported by all browsers. Therefore, caution is required when using them.
12Conclusion and Repeatable Process
Using Baseline, it is possible to significantly reduce JavaScript bundle size. This process requires regularly auditing dependencies and actively leveraging browser-native features. This approach improves both performance and user experience.