Nuxt项目中Cypress访问页面耗时过长该如何优化？

在我的项目中，Cypress访问Nuxt页面后再运行测试需要耗时15秒以上
测试本身运行速度很快，但页面加载耗时很长。
我可以采取哪些措施缩短访问耗时？

我需要在本地环境搭配MirageJS运行e2e测试，同时也需要在CircleCI中运行测试验证PR。

Cypress版本：7.4.0

Nuxt项目侧优化 #

• 测试环境裁剪依赖：在nuxt.config.js中通过环境变量判断，禁用测试场景不需要的插件/模块，包括第三方统计、埋点、非必要的外部资源加载，减少页面初始化的请求数和依赖体积。
• 启用轻量运行模式：如果测试不需要验证SSR逻辑，本地和CI环境都用nuxt dev --spa命令启动SPA模式，砍掉服务端渲染的额外开销，页面首次加载速度可提升30%以上。
• 开启增量编译：Nuxt配置中开启build.cache: true，保留编译缓存，避免每次修改代码后全量重编译，减少本地测试的服务启动耗时。

Cypress配置优化 #

• 开启实验特性：你使用的7.4.0版本支持experimentalSessionAndOrigin，在cypress.json中添加"experimentalSessionAndOrigin": true，可保留跨页面的上下文缓存，重复访问同页面时不需要重新加载全量资源。
• 缓存公共状态：如果多个测试用例需要访问同个页面、复用相同登录态，用cy.session()缓存页面资源和身份状态，避免每个用例都重新初始化页面。
• 关闭非必要功能：本地测试时在配置中添加"video": false关闭录屏，CI环境仅配置"screenshotOnRunFailure": true，仅在用例失败时生成截图，减少Cypress本身的性能消耗。

MirageJS适配优化 #

• 减少重复初始化：不要在beforeEach全局钩子中全量重置MirageJS的数据库和路由规则，仅在需要清空数据的用例前单独执行重置操作，减少Mock服务的初始化开销。
• 静态化大体积响应：如果有返回数据体积超过10KB的接口，直接用静态JSON作为返回值，不要用MirageJS的动态生成逻辑，降低Mock接口的响应耗时。

CircleCI专属优化 #

• 配置多层缓存：将node_modules、Nuxt构建缓存、Cypress二进制文件全部纳入CI缓存规则，避免每次跑PR都重新下载依赖、全量构建项目，可减少50%以上的环境初始化耗时。
• 提升容器配置：Nuxt开发服务和Cypress运行对CPU、内存占用较高，将CI容器规格调整到2核4G及以上，避免资源不足导致的页面加载卡顿。

内容的提问来源于stack exchange，提问作者hoffman