webpack性能优化核心是构建耗时统计与瓶颈可视化：启用--profile--json生成stats.json，用webpack analyse或webpack-bundle-analyzer分析；集成webpack-jarvis实现实时监控；typescript项目需开启incremental编译并用fork-ts-checker-webpack-plugin分离类型检查。

Webpack 构建时长统计与性能耗时分析，核心是两件事：一是准确记录每次构建各阶段的耗时，二是可视化定位瓶颈模块。不需要改业务逻辑，靠配置和工具就能快速落地。

启用构建耗时统计（基础必开）

Webpack 自带 --profile 和 --json 参数，可导出完整构建过程的结构化数据：

• 在命令行中运行：webpack --profile --json > stats.json
• --profile 启用详细计时，记录 loader、plugin、module 解析等各环节耗时
• --json 输出标准 JSON 格式，包含所有模块大小、依赖关系、构建时间戳等元信息
• 生成的 stats.json 是后续所有分析工具的输入源

可视化分析构建瓶颈（推荐两种方式）

拿到 stats.json 后，用以下任一方式打开即可交互式查看：

php版微信js-sdk支付接口类

php版微信js-sdk支付接口类

下载

• 在线版（免安装）：访问 Webpack Analyse，直接拖入 stats.json 文件，自动展示模块体积、依赖图、耗时瀑布流
• 本地 CLI 版（更稳定）：
  • 全局安装：npm i -g webpack-bundle-analyzer
  • 执行：webpack-bundle-analyzer stats.json（默认打开 http://localhost:8888）
  • 支持按“耗时”“大小”“请求数”排序，点击模块可下钻查看 loader 执行链路

集成到开发流程中（实时监控）

想在每次保存就看到构建时间变化？推荐 webpack-jarvis：

• 安装：npm i -D webpack-jarvis
• 配置到 webpack.config.js 的 plugins 中：

const Jarvis = require("webpack-jarvis");
plugins: [
  new Jarvis({ port: 3001 })
]

启动 Webpack 后访问 http://localhost:3001，界面会实时显示本次构建总耗时、模块数量、内存占用，并支持历史趋势对比。

配合 TypeScript 深度优化（关键提速点）

如果项目用的是 TypeScript，光看 Webpack 耗时不全面——类型检查可能占了大头。需联动优化：

• 在 tsconfig.json 开启增量编译："incremental": true，并指定 "tsBuildInfoFile": "./.tsbuildinfo"
• Webpack 配置中用 fork-ts-checker-webpack-plugin 把类型检查移出主线程，避免阻塞打包
• 运行 tsc --extendedDiagnostics 单独查看类型检查各阶段（parse/bind/check）耗时占比