在chrome network面板中，先开启捕获并刷新页面，再按size列降序排列快速定位大css/js文件；接着用filter框输入“css size:>200k”等条件精确筛选；最后导出har或复制响应内容深入分析优化点。
你想在Chrome浏览器F12的Network面板中快速定位体积过大的CSS和JS文件，避免被海量小资源淹没，直接筛选出可能拖慢首屏加载的关键瓶颈。
打开Network面板并确保请求已捕获
按 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）打开开发者工具 → 点击顶部 Network 标签页 → 刷新页面（或执行触发资源加载的操作），让CSS/JS请求真实出现在列表中。
注意：若刷新后列表为空，检查左上角红色圆点是否亮起——它必须是实心红色才表示正在记录请求；未点亮则点击一次开启捕获。
用Size列排序快速识别大文件
找到表格头部的 Size 列 → 单击一次按升序排列 → 再单击一次切换为降序 → 最大的CSS和JS文件会自动堆叠在最上方。
这一步最直接有效，因为Network面板原生支持Size列排序，无需输入任何过滤语句。特别适合初筛：一眼就能看到 main.min.js 1.2 MB 或 vendor.css 840 KB 这类明显异常值。
用Filter框精确过滤指定大小范围的CSS/JS
方法一：基础关键词 + 大小限制
在Network面板顶部的Filter输入框中输入：css size:>200k → 回车。此时仅显示体积超过200KB的CSS文件。
同理，输入 js size:>500k 可筛选体积超500KB的JS文件。注意单位必须用小写k（代表KB），不能写KB或Kb；大于号>前后不留空格。
方法二：正则 + 大小组合（进阶）
输入：/\.css$/ size:>150k → 回车。该正则确保只匹配以.css结尾的URL，排除了带查询参数的伪CSS路径（如theme.css?v=2.1）。
方法三：排除小文件，聚焦“真正的大户”
输入：-(size: → 回车。这会排除所有小于10KB的CSS，留下中大型CSS供重点分析。注意括号必须英文半角，减号-表示排除逻辑。
【size:>数值必须紧跟冒号，中间不能有空格，否则过滤失效】
导出结果做进一步分析
第一步：右键任意一个已筛选出的大CSS/JS请求 → 选择 Save as HAR with content。
第二步：打开生成的.har文件（可用VS Code或HAR Viewer在线工具）→ 查看每个资源的完整headers、timing、content → 定位是否含未压缩代码、重复引入、内联base64图片等可优化项。
第三步：回到Network面板 → 右键该请求 → 选择 Copy → Copy response → 粘贴到编辑器中检查原始内容，确认是否真为未压缩的开发版文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
