Description
Our webpack bundle is currently bloated by the inclusion of moment.js, a massive, legacy JavaScript date manipulation library. We are utilizing it merely to format basic dates on the Order History page and blog posts, but we are paying a massive 300kb penalty in our initial JavaScript payload, severely degrading our Time to Interactive (TTI).
Proposed Solution
- Execute a global search across the codebase for
import moment from 'moment'.
- Surgically rip out the dependency and uninstall it from
package.json.
- Replace all date formatting logic utilizing one of two highly optimized alternatives:
- Option A (Zero Dependencies): Utilize the native, built-in browser API:
new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date()).
- Option B (Lightweight): If complex manipulation is truly required, migrate to
date-fns, which is highly modular and supports aggressive tree-shaking, meaning we only bundle the exact functions we use. This simple swap will instantly shave hundreds of kilobytes off our bundle size.
Description
Our webpack bundle is currently bloated by the inclusion of
moment.js, a massive, legacy JavaScript date manipulation library. We are utilizing it merely to format basic dates on the Order History page and blog posts, but we are paying a massive 300kb penalty in our initial JavaScript payload, severely degrading our Time to Interactive (TTI).Proposed Solution
import moment from 'moment'.package.json.new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(new Date()).date-fns, which is highly modular and supports aggressive tree-shaking, meaning we only bundle the exact functions we use. This simple swap will instantly shave hundreds of kilobytes off our bundle size.