Webpack构建超时警告需在compiler.hooks.done中用stats.startTime/endTime计算总耗时，体积分析必须在compiler.hooks.emit中通过compilation.assets.size()获取真实产物大小，并结合环境变量和防重复机制精准预警。
Webpack 构建耗时超过阈值时如何触发警告
Webpack 本身不提供开箱即用的“性能预警”功能，但可通过 compiler.hooks.done 钩子读取构建耗时，并与预设阈值比对。关键在于：构建总耗时 = stats.endTime - stats.startTime，而非 stats.builtAt 或 Date.now() 差值——后者受异步任务干扰，不准。
常见错误是直接监听 compilation 钩子，但它只反映单次编译开始，无法获取结束时间；也有人误用 afterEmit，但此时资源已写入磁盘，stats 尚未生成。
- 在插件
apply方法中监听compiler.hooks.done - 从
stats参数解构startTime和endTime（注意：Webpack 5+ 中这两个字段默认存在，无需额外配置） - 阈值建议设为 30000（30 秒），CI 环境可下调至 15000，本地开发可放宽至 60000
- 用
console.warn输出，避免throw中断构建——预警不是阻断
模块体积超限后如何定位并提示具体文件
仅知道“打包太大”没用，真正要解决的是哪个 .js 或 .css 文件拖慢了首屏。这得靠 compilation.hooks.seal 或更稳妥的 compiler.hooks.emit 后解析 compilation.modules，过滤出 size > 阈值的模块。
注意：Webpack 5 的 module.size() 返回的是原始源码长度（不含 loader 处理后的结果），若需真实产物大小，应查 compilation.assets[filename].size()；但该对象在 emit 钩子才完整可用。
- 在
compiler.hooks.emit中遍历compilation.assets - 匹配
/\.js$|\.css$/i，跳过map、html等非代码资产 - 对每个 asset 调用
asset.size()，对比阈值（如 200 * 1024 表示 200KB） - 用
compilation.modules.find(m => m.identifier() === 'xxx')反查原始模块路径，提升可读性
为什么不能在 afterCompile 钩子里做体积分析
因为 afterCompile 触发时，compilation.assets 还是空的——Webpack 尚未执行代码生成（code generation）阶段。此时你看到的 modules 是 AST 层级的，size() 返回的是源码行数或 loader 输入长度，和最终产出严重不符。
更隐蔽的问题是：某些插件（如 MiniCssExtractPlugin）会延迟注入 CSS 资产到 assets，必须等 emit 钩子才能确保全部就位。强行提前读取，要么报错，要么漏报。
-
afterCompile→ 模块已优化，但资产未生成 -
emit→ 所有assets已就绪，含 chunk、CSS、图片等 -
done→ 构建完成，但assets已被清理（部分插件会删临时 asset），不可靠
如何避免重复预警和 CI 环境误报
同一构建过程可能触发多次 emit（比如 watch 模式下增量编译），若每次都在终端刷 warning，信息就淹没了。同时，CI 环境常禁用颜色输出、截断长日志，直接 console.warn 容易被忽略。
真正有效的做法是：只在最终一次 emit（即全量构建完成）时预警；且把大体积文件列表聚合成一条结构化消息，附上 webpack-bundle-analyzer 的快速启动命令。
- 用闭包变量记录是否已预警，或监听
compiler.hooks.done后置标记 - 将超限文件按 size 降序排列，只打印前 5 个，避免刷屏
- 在 warning 中嵌入
npx webpack-bundle-analyzer dist/stats.json命令，前提是已生成 stats - 通过
process.env.CI判断环境，CI 下改用console.error并加前缀[PERF-WARN]，方便日志筛选
最易被忽略的是：没关掉 devtool: 'source-map' 就跑体积检查——它会让 JS 文件虚高 3–5 倍，预警完全失真。上线前务必确认 mode 和 devtool 匹配。
