Cypress E2E 测试中 webpack 预处理出现 chunk load 错误时如何生成 bundle-analyzer 报告

Cypress E2E 测试中 webpack 预处理出现 chunk load 错误时如何生成 bundle-analyzer 报告

【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypress

如果你的 Cypress 端到端（e2e）测试用@cypress/webpack-batteries-included-preprocessor预处理 spec 文件，运行时出现 chunk load 错误或打包体积异常，Cypress 官方文档给出的定位手段是：在启动 Cypress 前设置DEBUG=cypress-verbose:webpack-batteries-included-preprocessor:bundle-analyzer，让预处理器输出webpack-bundle-analyzer报告，从而确定问题原因。本文说明完成这一操作所需的安装、配置和验证方式。

前提条件：确认你的项目正在使用该预处理器

bundle-analyzer 报告机制内置于@cypress/webpack-batteries-included-preprocessor。如果你还没用它预处理 spec，先按 README 安装两个包：

npm install --save-dev @cypress/webpack-batteries-included-preprocessor @cypress/webpack-preprocessor

版本对应关系（来自该包 README）：webpackv5使用@cypress/webpack-batteries-included-preprocessor@3.x.x及以上；webpackv4使用2.x.x。

然后在项目的cypress.config.js中注册预处理器：

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor') module.exports = (on) => { on('file:preprocessor', webpackPreprocessor()) }

TypeScript spec 需要在选项里传入typescript: require.resolve('typescript')（需已安装 typescript），配置方式见 README 的 Usage 一节。

生成 bundle-analyzer 报告

在启动 Cypress 之前，把调试命名空间写入DEBUG环境变量，即把该变量前缀加到启动 Cypress 的 shell 命令上：

DEBUG=cypress-verbose:webpack-batteries-included-preprocessor:bundle-analyzer npx cypress open

命名空间必须与上式完全一致。源码中该常量定义在 index.ts：

const WBADebugNamespace = 'cypress-verbose:webpack-batteries-included-preprocessor:bundle-analyzer'

当该命名空间被启用时，预处理器会在默认 webpack options 的plugins数组中追加BundleAnalyzerPlugin：

// If the user is trying to debug their bundle, we'll add the BundleAnalyzerPlugin // to see the size of the support file (first bundle when running `cypress open`) // and spec files (subsequent bundles when running `cypress open`) ...(Debug.enabled(WBADebugNamespace) ? [new BundleAnalyzerPlugin()] : []),

也就是说，运行cypress open时，第一个 bundle 是 support file，之后的 bundle 是各个 spec file，报告里都能体现各自的大小。单元测试 test/unit/index.spec.ts 验证了这一点：Debug.enable该命名空间后，getFullWebpackOptions()返回的plugins中第二个构造器就是BundleAnalyzerPlugin。

webpack-bundle-analyzer由该包直接携带（package.json中依赖版本为4.10.2），无需你额外安装。

确认报告生成并用于定位问题

按 README 的 Debugging 一节，设置上述DEBUG后启动 Cypress，即会“得到一份webpack-bundle-analyzer报告，帮助确定问题原因”。文档给出的使用方式是：查看报告以确定 chunk load 错误 / bundle size 问题的成因；如果向 Cypress 提交 issue，请把这份报告一并附上，便于官方排查。

DEBUG变量本身的行为（写入stderr、cypress-verbose前缀用于降噪等）可在 guides/debug-logs.md 中核对。

补充手段：查看 webpack 打包统计

@cypress/webpack-batteries-included-preprocessor是对@cypress/webpack-preprocessor的封装（README 说明它支持后者相同的选项）。后者文档还给出了两个调试变量，用于在报告之外观察打包过程：

# 查看预处理模块自身的调试消息 DEBUG=cypress:webpack # 查看 Webpack bundle 诊断输出：耗时、chunks、大小 DEBUG=cypress:webpack:stats

出处是 npm/webpack-preprocessor/README.md 的 Debugging 一节，其stats输出包含 timings、chunks、sizes，可与 bundle-analyzer 报告配合判断是哪个 bundle 异常。

报告定位到缺失内置模块后的处理路径

从4.x.x起，@cypress/webpack-batteries-included-preprocessor只内置了buffer、path、process、os、stream的 shim。如果报告显示你的项目依赖了未提供的内置模块，README 给出的扩展方式是取出默认 webpack options 再按需装饰，例如补一个zlibshim：

const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor') function getWebpackOptions () { const options = webpackPreprocessor.getFullWebpackOptions() // add built-ins as needed options.resolve.fallback.zlib = require.resolve('browserify-zlib') return options } module.exports = (on) => { on('file:preprocessor', webpackPreprocessor({ webpackOptions: getWebpackOptions() })) }

其他可用 shim 参见 README 指向的 webpackresolve.fallback配置项说明。

适用边界

• 本文的DEBUG命名空间对应 e2e 测试中使用的 webpack 预处理器（@cypress/webpack-batteries-included-preprocessor）。组件测试（component tests）如果通过 webpack 出 chunk load 错误，对应的是@cypress/webpack-dev-server包，命名空间为DEBUG=cypress-verbose:webpack-dev-server:bundle-analyzer，见 npm/webpack-dev-server/README.md，流程相同但变量不同，不要混用。
• 报告用于诊断成因与提 issue 佐证；文档没有给出固定的“成功数值”，具体判断以报告内容为依据。

【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypress