前端优化需用命令行工具：用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' → 快速查看构建产物各目录体积排序；

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

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 插件或构建脚本统一处理。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！