Sublime Text 是高效分析 Webpack 打包结果、验证代码分割及优化体积的编辑器工具。它支持快速查看 stats.json、检查 chunk 命名与内容、搜索冗余引入，并辅助按需引用和模块替换。
Sublime Text 本身不直接参与 Webpack 打包或前端性能优化，但它可以作为高效查看、分析打包结果和管理代码分割策略的编辑器。关键在于如何用 Sublime 快速理解 Webpack 输出（如 stats.json）、定位大体积模块，并配合代码分割（Code Splitting）实践做针对性优化。
用 Sublime 查看并分析 Webpack 打包报告
Webpack 可生成详细构建统计文件（stats.json），Sublime 加载快、支持大文件和 JSON 高亮，适合人工快速扫描瓶颈。
- 在 Webpack 配置中添加：
stats: { assets: true, chunks: true, modules: true, source: false }，再通过webpack --json > stats.json导出 - 用 Sublime 打开
stats.json，配合插件 JSON Reindent 或 SideBarEnhancements 快速折叠/展开、搜索模块名或size字段 - 重点关注
assets中 JS/CSS 文件体积、chunks的依赖关系、以及modules里重复引入或体积异常大的第三方库（比如未按需引入的lodash或整包moment）
借助 Sublime 审查代码分割落地情况
代码分割是否生效，不能只看配置，要看实际产出——Sublime 是比浏览器 Network 面板更“贴近源码”的验证工具。
- 检查 Webpack 输出目录（如
dist/js/），用 Sublime 批量打开 chunk 文件，观察命名是否符合预期（如login.abc123.js、vendors-react.45def.js） - 搜索项目中的
import()动态导入语法，确认路径是否正确、是否有意外的同步引用“绕过”了分割（例如某处写了import React from 'react'而非React.lazy(() => import('./Component'))） - 结合
SplitPane插件左右对比：一边是源组件文件，一边是对应生成的 chunk 内容，验证是否真的只包含该模块及其最小依赖
用 Sublime 快速识别可拆分/可替换的“重模块”
很多性能问题源于单个文件过大或依赖冗余，Sublime 的搜索与跳转能力能帮你快速定位改进点。
立即学习“前端免费学习笔记（深入）”；
- 全局搜索
import.*[\"'].*[\"']（正则模式），筛选出高频引入但仅用其中一两个方法的库（如import _ from 'lodash'）→ 改为import debounce from 'lodash/debounce' - 对 node_modules 中的大型依赖（如
ant-design、echarts），用 Sublime 打开其package.json或入口文件，确认是否有独立的 esm 模块路径可直接引用，避免全量加载 - 标记注释辅助识别：在疑似“重逻辑”组件顶部加 // ⚠️ LARGE: ~180KB after build，后续重构时一眼可见
基本上就这些。Sublime 不是构建工具，但它是你读懂 Webpack “体检报告”、盯住代码分割落地细节、快速动手优化的趁手工具。配合好 stats 分析 + 动态导入 + 按需引用，性能提升很实在。
