为什么我的网页Performance Score总是卡在80多分上不去？

夏侯雯雯提问于 2026-03-24 13:06:20 阅读 29

前端

我用Lighthouse测了好几次，Performance Score一直在82~86之间徘徊，其他项都绿了，就这个上不去。我已经压缩了图片、用了懒加载，还把关键CSS内联了，但还是没突破90分。

控制台里看到有个警告说“Reduce unused JavaScript”，但我用的是Vite打包，默认做了tree-shaking啊。这是我的构建配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        }
      }
    }
  }
})

是不是还得手动拆包？或者有别的隐藏优化点没注意到？

我来解答赞 4 收藏

反馈

1 条解答

___玉楠 Lv1

这个问题听起来挺头疼的，不过别担心，一步一步来。Lighthouse的Performance Score卡在80多分，说明你已经做了不少优化工作，剩下的可能是一些细碎的地方没注意到。

你说的那个“Reduce unused JavaScript”警告是个关键点。即使你用了Vite打包并且做了tree-shaking，有时候还是会有一些未使用的JavaScript被包含进来。你可以试试在你的构建配置里增加一些插件来帮助移除这些未使用的代码。比如可以尝试使用vite-plugin-optimize-persist来优化持久化缓存，或者rollup-plugin-terser来压缩和移除未使用的代码。

至于代码分割，虽然你已经有了vendor chunk，但可能还需要进一步细化。你可以尝试给不同的模块单独打包，这样可以减少每个页面加载的JavaScript量。可以在你的manualChunks里添加更多的规则，比如按功能模块拆分，而不是单纯地把所有第三方库放在一起。

此外，检查一下你的主题是否有不需要加载的脚本，尤其是那些只在特定页面或条件下才需要的脚本。可以考虑把这些脚本动态加载，而不是一开始就加载所有的脚本。主题里加个条件判断，按需加载脚本。

最后，确保你的缓存策略是最优的，包括浏览器缓存和CDN缓存，这也能对性能有一定提升。

希望这些建议能帮到你，慢慢调，总能找到那个关键点突破90分。加油！

2026-03-24 13:11