Return

Bundle Optimization

PERFORMANCE •

Situation

Found First Load JS size bloat after cesium integration. From the build result, every page was requiring over 2MB of JS. Vercel Speed Insights dashboard was showing FCP (First Contentful Paint) peaks of up to 10 seconds.

Task

  • Identify the root cause of performance degradation and improve performance.

Action

1. Measured bundle sizes with @next/bundle-analyzer

  • Identified bundles required for each routes
  • Configured build option with bundle analysis

2. Researched about module bundling process

  • Figured out how the module bundling is processed
  • Detected side effects of barrel exports
  • Updated UI package's export strategy from single index to individual file

3. Lazy loaded heavy dependencies (Cesium, Three.js)

  • Defined boundaries of bundles per routes
  • Decided which to apply lazy loading and applied
  • Wrapped components using heavy dependencies with lazy loading and Suspense

4. Applied lightweight library variants

  • Restricted languages supported from react-syntax-highlighter using lightweight variants

Results

The blind use of barrel exports and external libraries was a major factor in the performance degradation. The bundle size for home page dropped from 2.55 MB to 853KB, about 66% reduction. First contentful paint was stabilized at an average 1.2s. This affected the @juun-roh/cesium-utils package's modular export strategy.