用途
该技能用于审查与“压缩所有 JavaScript 文件”相关的前端问题,适用对象包括脚本、客户端组件、打包产物以及运行时行为。其目标是确认生产环境中的 JavaScript 已完成压缩(minify),从而减小文件体积、去除注释,并优化加载与执行速度。
主要能力
- 检查生产环境中的所有 JavaScript 文件是否已压缩。
- 识别未压缩带来的页面体积增加问题。资料指出,未压缩的 JavaScript 会为页面增加数百 KB 的体积,在移动网络下尤其拖慢加载速度。
- 提供快速参考:在构建工具(如 Vite、webpack 等)中启用压缩;使用 Terser 进行现代 JavaScript 压缩;启用 tree-shaking 以移除未使用代码;典型可减少 50% 至 70% 的文件大小。
- 提供修复方向:配置构建系统,使用 Terser、UglifyJS 或框架内置的压缩能力进行生产部署。
- 提供解释:说明 JavaScript 压缩如何通过减小打包体积、消除死代码和优化解析速度来提升网站性能。
- 提供代码审查:审查与压缩相关的脚本、客户端组件和浏览器执行路径,标记违反规则的导入、事件处理器、运行时副作用或阻塞操作,并说明应如何在浏览器中验证改动。
使用方式
该技能可按检查、修复、解释和代码审查等环节使用。进行代码审查时,关注具体导入、事件处理器、运行时副作用或阻塞操作,并明确改动在浏览器中的验证方式。更多完整实现细节、代码示例和针对特定框架的指导,见 references/rule.md。规则页面为:https://frontendchecklist.io/en/rules/javascript/javascript-minification
适用场景
适用于前端项目中审查 JavaScript 压缩情况的场景,尤其是需要确认生产构建是否已压缩、是否启用 tree-shaking,以及是否因未压缩而影响移动网络加载性能时。
限制
资料未提供具体的安装命令、价格、收费模式或平台限制等信息。