Skip to content

perf: 优化页面加载速度与资源分配,提升用户体验#4

Open
cto-new[bot] wants to merge 1 commit into
mainfrom
perf-optimize-page-load
Open

perf: 优化页面加载速度与资源分配,提升用户体验#4
cto-new[bot] wants to merge 1 commit into
mainfrom
perf-optimize-page-load

Conversation

@cto-new

@cto-new cto-new Bot commented Oct 31, 2025

Copy link
Copy Markdown

Summary

本 PR 系统性优化了页面加载体验,通过优先级资源分配、动态导入和多项 Next.js 配置提升,显著缩短首屏加载及总体响应时间,并完善性能监控体系。

Details

  • 首页、关键业务页面采用分阶段数据加载与 Suspense 边界,实现首屏资源优先、渐进式展示
  • 大体量组件和模态组件全部动态导入,实现代码分割与减轻首屏压力
  • Next.js 配置层面启用 SWC minify、图片自动优化、包导入剪裁等性能选项
  • layout.tsx 中预连接/预抓取高频三方域名与字体,提升 API、图片和字体的加载首字节表现
  • 新增性能监控、优化图片、批量状态更新等 util,提高性能观测和资源分配效率
  • 解决 lint 阻塞构建问题,完善 TypeScript 类型,保证 CI 稳定性,无破坏性变更

Significantly improves page load speed and user interaction responsiveness.
- Implements dynamic import (`next/dynamic`) for large/non-critical components to enable code splitting and reduce initial JS payload.
- Refactors data fetching in homepage for prioritized, staged loading of above-the-fold content followed by background fetch for secondary data.
- Optimizes Next.js config: enables SWC minification, advanced image optimizations and package import trimming.
- Adds font and third-party resource prefetch, preconnect in root layout.
- Introduces new utilities for resource preloading, performance monitoring, optimized images, and advanced lazy loading patterns.
- Fixes lint error caused by empty function in new performance.ts utility.

These changes decrease first paint and largest contentful paint metrics, leading to a visibly faster and smoother site. No breaking changes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants