Heavy library in the first-load bundle
Why it matters
A large library imported statically into client code on a route is downloaded, parsed and executed before the page is interactive.
Fix
Load the widget with next/dynamic (below the fold), import only the part you need, or use a lighter alternative (Intl/date-fns for moment).
Credit
From the Next.js team
The lazy-loading and bundling guides recommend dynamic import for heavy libraries so they stay out of the first-load bundle.
From Google Chrome
web.dev recommends code splitting to cut JavaScript payloads.
References
- How to lazy load Client Components and librariesNext.js
- Optimizing package bundlingNext.js
- Reduce JavaScript payloads with code splittingweb.dev
- Remove unused JavaScriptChrome for Developers