Next.js使用SSR时页面加载时间过长大量workbox运行拖慢加载速度

开发者阿泽

2026-10-5

性能截图1
性能截图2

问题原因

workbox是Service Worker生态的工具库，你观察到的大量workbox运行耗时，基本是项目集成了next-pwa插件后配置不合理导致：

开发环境下PWA的Service Worker反复注册、缓存校验逻辑会额外占用运行资源
静态资源缓存策略配置不当，每次请求都触发workbox的规则匹配、缓存校验逻辑
SSR页面的动态资源被误加入缓存规则，多余的缓存判断拖慢页面加载速度

解决方案

1. 开发环境直接禁用PWA

修改next.config.js配置，开发环境关闭PWA功能，避免不必要的workbox运行：

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
});

module.exports = withPWA({
  // 其他next.js配置项
});

2. 优化生产环境缓存规则

调整workbox缓存策略，排除SSR动态页面、接口请求的不必要缓存：

const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  workboxOptions: {
    // 排除不需要缓存的动态资源路径
    exclude: [
      /^\/api\/.*/,
      /^\/_next\/data\/.*/,
      /\.html$/,
    ],
    runtimeCaching: [
      {
        urlPattern: /^.*\.(png|jpg|jpeg|gif|webp|svg|ico|css|js)$/,
        handler: 'CacheFirst',
        options: {
          cacheName: 'static-assets',
          expiration: {
            maxEntries: 100,
            maxAgeSeconds: 30 * 24 * 60 * 60,
          },
        },
      },
    ],
  },
});