前端优化需用命令行工具：用tree查目录结构与大小，wc/du统计代码行数和体积，设别名提效，find/ImageMagick检测未压缩图片。
网页前端优化过程中常需在本地验证资源体积、检查文件结构、统计代码行数、设置快捷别名等操作，这些任务离不开命令行工具的高效支持。
查看项目文件结构和大小分布
第一步：安装 tree 命令（macOS 默认未内置，Linux 多数已预装）→ 执行 brew install tree（macOS）或 sudo apt-get install tree（Ubuntu/Debian）。
第二步：进入项目根目录后运行 tree -L 3 -h --du -I "node_modules|.git|dist"，它会以人类可读格式展示三层深度的目录树，并附带各子目录磁盘占用，同时自动排除体积庞大且与前端构建无关的 node_modules、.git 和 dist 目录。
这一步能快速定位出哪些文件夹异常臃肿——比如意外混入了未压缩的原始设计稿或视频素材，这类问题单靠 IDE 文件面板很难一眼识别。
立即学习“前端免费学习笔记（深入）”；
快速统计 JS/CSS 文件总行数和体积
方法一：用 wc 统计关键资源行数 → 在 src 目录下执行 wc -l **/*.js **/*.ts **/*.css | tail -n +1 | sort -nr | head -20，可列出前 20 个最多行数的脚本与样式文件，帮助识别过度膨胀的模块。
方法二：用 du 查看压缩前后体积差异 → 先构建生产包（npm run build），再执行 du -sh dist/static/js/*.js | sort -hr，观察未压缩 JS 是否存在单文件超 500KB 的情况——【超过此阈值说明未启用代码分割或未剔除大型依赖】。
为高频操作设置永久别名
打开终端配置文件：code ~/.zshrc（macOS）或 code ~/.bashrc（Linux），在末尾添加：
alias bsize='du -sh dist/* | sort -hr' → 快速查看构建产物各目录体积排序；
alias ccount='find src -name "*.js" -o -name "*.ts" -o -name "*.vue" | xargs wc -l | tail -1' → 一键统计前端源码总行数；
alias cleanbuild='rm -rf dist && npm run build' → 彻底清除旧构建再重打，避免缓存污染导致的体积误判。
保存后执行 source ~/.zshrc（或 source ~/.bashrc）立即生效。这些别名写一次，后续所有性能排查都能节省 3～5 秒重复输入时间。
检测未压缩图片并批量处理
方法一：查找大于 200KB 的 PNG/JPG → 运行 find src -iname "*.png" -o -iname "*.jpg" -o -iname "*.jpeg" -size +200k，结果中若出现 logo.png、banner.jpg 等业务图片，基本可判定未走构建时的压缩流程。
方法二：用 ImageMagick 检查原始分辨率 → 对可疑图片执行 identify -format "%wx%h %b %Q" src/assets/logo.png，若输出显示 3840x2160 且质量参数（%Q）为 95，说明该图直接扔进了工程，没经过响应式适配或质量裁剪。
注意：不要在生产环境直接运行 convert 命令覆盖原图，应通过 webpack 插件或构建脚本统一处理。
