Optimize Core Web Vitals - FCP and LCP: Optimize bundle size by lazy loading heavy 3rd-party package

Resources https://nextjs.org/docs/pages/building-your-application/optimizing Bundle Analyzer Optimizing Package Bundling https://nextjs.org/docs/app/building-your-application/optimizing/package-bundling Setup and get reports Findings Static import of libraries with large package size For example, import { HeavyLibComponent } from 'heavy-lib'; import { runSomething } from 'heavy-lib'; Steps-by-steps Dynamically import components using Next.js next/dynamic https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic Change from import HeavyLibComponent from 'heavy-lib'; To import dynamic from 'next/dynamic'; const HeavyLibComponent = dynamic(() => import('heavy-lib')); Use import() to dynamically import modules/libraries to use functions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import Because the function runSomething needs to be called only when the event handler function handleClick is executed when the user clicks the button. Before the change, statically importing functions from a library at the top level of a module would cause any other JS importing this module to import the library code unused. Therefore, use import() instead to dynamically import functions from the library within the event handler function. Change from import { runSomething } from 'heavy-lib'; const handleClick = () => { runSomething(); } To const handleClick = async () => { const { runSomething } = await import('heavy-lib'); runSomething(); }

import { HeavyLibComponent } from 'heavy-lib';
import { runSomething } from 'heavy-lib';

import HeavyLibComponent from 'heavy-lib';

import dynamic from 'next/dynamic';

const HeavyLibComponent = dynamic(() => import('heavy-lib'));

import { runSomething } from 'heavy-lib';

const handleClick = () => {
    runSomething();
}

const handleClick = async () => {
    const { runSomething } = await import('heavy-lib');
    runSomething();
}

Related Posts

Using Excel Today Function in 2025!

Mar 14, 2025  0

Top 20 Common TypeScript Mistakes and How to Fix Them

Feb 22, 2025  0

new dev

Mar 15, 2025  0