Next 性能优化

1. 从 CDN 加载 CSS 速度慢，阻塞页面渲染：CSS 加载慢导致 FCP 时间长，原因是 DOM 解析之后不会立即渲染，而是等待这几个外部 CSS 文件加载，如果他们很慢，渲染树就会一直导致阻塞。
   
   解决方案：
   使用 critters（在服务器端运行）将体积较小的 css 文件嵌入 <style /> 中，使浏览器加载完 html 立刻渲染。输出的 HTML 会发现干掉了 <link> 标签，替换成了内嵌 <style> ，效果就是 HTML 加载完之后会立即开始渲染。结果：FCP 可能会降 100ms 左右，FID 可交互时间能降低 20ms 左右。但是 HTML 增量大约 15-20kb，组件库的样式会固定占用一些

   // bash 安装 critters
   npm i -D critters
   // next.config.js
   experimental: {
     optimizeCss: {
       compress: true,
       inlineThreshold: 60 * 1024, // 60kb 以下全量嵌入，60kb 以上的会根据 HTML 标签动态抽取嵌入（动态抽取对 html体积影响更小，但会增加 TTFB）
     },
   }
   

2. 图片体积太大
   
   https://img2.soyoung.com/origin/20230406/3/35d8dc71fb86be7be3ddaca1b647bf75.png

3. 首屏图片请求数量太多
   解决方案：业务代码尽量使用懒加载标签 <Image />

4. Js Chunk 数量多体积大
   webpack 打包的过程中，生成的 js 文件，每一个 js 文件我们把它叫做 chunk。
   
   方案：改造部分库，使其支持 tree-shaking
   Tree shaking 原理及应用
   tree-shaking: 在项目开发中，我们会按照模块划分的方式将代码组织起来，tree shaking 的作用是把项目中没必要的代码全部抖落掉，消除被引用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的减少，也属于项目性能优化的一部分。
   Tree shaking 早期由 rollup 实现，后期 webpack2 也增加了 Tree shaking 的功能，在 webpack 中，Tree shaking 指的就是按需加载，即没有被引用的模块不会被打包进来，减少我们的包大小，缩小应用的加载时间，呈现给用户更佳的体验。

5. 首屏接口服务器端响应慢
   需要确认问题是在 node 端还是 api 端，简单的排查方案：在浏览器的客户端和 initprops 中添加 console.log，使用 sentry 的 breadcrumbs 可以将 Event 和后端接口请求时间关联起来。
   
   

6. redirect 耗时
   状态码 308，耗时可能长达数十秒。
   原因：如果 URL 不带尾斜杠，可以必现这个问题，有时候加载慢都是重定向造成的。
   解决方案：查找配置错误的入口并修改；升级到 v12.3.4 或 v13 使用 skipTrailingSlashRedirect 配置。
   (Nextjs should have more options for trailing slash. · vercel/next.js · Discussion #23988)
   (Routing: Middleware)