用途：本技能面向 Storefront Next 店铺前端，提供性能优化技巧，帮助开发者控制包体积、优化图片与数据获取、提升 Lighthouse 指标并排查常见性能问题。
主要能力： 包体积限制。应用在 package.json 的 bundlesize 配置中执行严格限制，可用 pnpm bundlesize:test 校验包是否在限值内，用 pnpm bundlesize:analyze 分析包组成。 内置指标。在 config.server.ts 中配置 performance.metrics，可开启 serverPerformanceMetricsEnabled、clientPerformanceMetricsEnabled，serverTimingHeaderEnabled 仅调试时启用。可跟踪 SSR 操作与渲染时间、SCAPI 调用及并行情况、认证操作、客户端导航计时。 并行数据获取。loader 中应同时返回所有 promise，避免顺序 await；用同步 loader 返回 promise 可让数据逐个到达，实现流式传输，并配合细粒度 Suspense 边界做渐进式渲染。 图片优化。使用 DynamicImage 组件，默认 WebP 格式；显式设置 width 与 height 防布局偏移；首屏以下图片懒加载；alt 以 SCAPI 图片 alt 文本为主。 Lighthouse 优化。可用 pnpm lighthouse:ci 运行 Lighthouse CI，关注预加载关键 CSS、WebP 图片、懒加载、字体加载优化与减小 JS 包体积。
使用方式：通过上述 pnpm 命令直接执行；在配置文件中开启指标；在 loader 与图片组件处按建议改造代码。
适用场景：检查包体积、优化图片与加载性能、排查布局偏移、SCAPI 响应慢、页面跳转慢等。
限制：资料未说明依赖版本、支持平台与其他收费或效果数据；具体落地需结合实际项目，命令与代码请保持原样。