next.js性能优化记录

针对非首屏组件动态加载实现分包

React.lazy + <Suspense fallback={`Loading...`}></Suspense>

或者

const DynamicComponentWithCustomLoading = dynamic(
  () => import('../components/hello'),
  { loading: () => <Loading />}
)

或者

const DynamicHeader = dynamic(() => import('../components/header'), {
    suspense: true
});
return (
        <Suspense fallback={`Loading...`}>
            <DynamicHeader />
        </Suspense>
    );

实现动态加载组件以及必要时加载组件占位区域时的loading。

在项目中通过将一些暂不可见的组件和重型插件时通过动态加载的方式加载进来，有效减少代码体积。

首屏渲染

在_document文件实现初始文件响应后立即loading的效果，首屏渲染有更好的体验，后续可以考虑把loading换成骨架屏

通过next的Script组件优化 script 加载时

使用Next.js的Script组件可以优化script加载时的性能。通过在Script组件中设置strategy属性，可以控制Script的加载方式，常用的加载方式有lazyOnload和afterInteractive。lazyOnload方式会在页面完全加载后再加载Script，而afterInteractive方式则会在页面DOM解析完毕后立即加载Script，可以更快地提高页面的加载速度。

图片懒加载

图片懒加载是一种有效的优化性能的方法。通过按需加载图片资源，可以减少页面初始加载的大小，从而提高页面性能。而通过加载不同尺寸的图片资源，则可以更好地适应不同的屏幕大小和设备类型，从而进一步提高用户体验。next的Image组件可以在加载图片时自动对图片进行优化。