Nextjs首屏加载速度性能从80分优化到98分

• 使用Google控制台的Network面板检查首次加载资源请求的重复加载情况
  在Google Chrome开发者工具中，打开Network面板，刷新页面并记录首次加载的资源请求。通过查看请求列表，可以检查是否有重复加载的资源，例如相同的JavaScript文件、CSS文件或图片被多次请求。重复加载会浪费带宽并延长页面加载时间。可以通过以下步骤进行优化：

  1. 检查是否有重复的模块或库被引入，例如多个地方引用了相同的第三方库。
  2. 使用Webpack的SplitChunksPlugin将公共代码提取到单独的chunk中，避免重复加载。
  3. 确保静态资源（如图片、字体）的缓存策略正确配置，避免重复下载。

• 使用Google控制台的Performance面板录制首屏加载过程，分析文件时长和阻塞情况
  在Performance面板中，点击“Record”按钮开始录制页面的首次加载过程。录制完成后，可以查看详细的加载时间线，包括JavaScript执行、CSS解析、网络请求等。重点关注以下内容：

  1. 主线程阻塞：检查是否有长时间运行的JavaScript任务阻塞了页面渲染，可以通过代码拆分或异步加载优化。
  2. 不必要的资源加载：识别首次加载时不需要立即展示的组件或资源（如弹窗、轮播图等），使用懒加载（Lazy Loading）或按需加载（Dynamic Import）技术延迟加载这些资源。
  3. 关键渲染路径优化：确保关键CSS和JavaScript优先加载，减少首屏渲染时间。

• 使用@next/bundle-analyzer可视化检查页面和打包的资源大小，进行针对性优化
  在Next.js项目中，安装并配置@next/bundle-analyzer插件，生成打包资源的可视化报告。通过报告可以清晰地看到每个页面和组件的打包大小，识别出体积较大的模块或库。优化步骤如下：

  1. 移除未使用的代码：使用工具如Tree Shaking或PurgeCSS删除未使用的JavaScript和CSS代码。
  2. 压缩资源：使用Webpack的TerserPlugin和CssMinimizerPlugin对JavaScript和CSS进行压缩。
  3. 按需加载第三方库：例如，使用lodash-es代替lodash，或者只引入需要的部分功能。
  4. 优化图片和字体：将图片转换为WebP格式，使用字体子集化减少字体文件大小。
  5. 代码拆分：将大型库或组件拆分为单独的chunk，按需加载以减少初始包大小。

// next.config.js
const withBundleAnalyzer