gsd-2 代码优化技能之包体积与依赖治理:用 Grep/Glob 模式扫描重导入、冗余依赖与缺失懒加载

发布时间:2026/10/7 2:10:19
gsd-2 代码优化技能之包体积与依赖治理:用 Grep/Glob 模式扫描重导入、冗余依赖与缺失懒加载 人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载导读本文面向使用 gsd-2 项目中code-optimizer技能SKILL.md的开发者与 AI Agent深度拆解其第五号专项 Agent 所依据的检测清单——bundle-dependencies.md。这份参考文件定义了包体积与依赖领域的全部可机器化扫描模式从lodash全量导入、moment.js残留到重复功能库并存、devDependencies 混入生产代码、大型组件缺失懒加载以及未优化图片资源。读完本文你将掌握一套可直接复制到 Grep/Glob 工具的检测正则理解每类反模式的性能成因并获得从扫描命中到修复落地的完整策略包括与仓库内react-best-practices相关规则的配套用法。一、这份参考文件在技能体系中的位置gsd-2 的code-optimizer技能采用并行多 Agent 审计架构检测到技术栈后一次性并行派发 13 个专项 Agent每个 Agent 只负责一个性能问题域且严禁在搜索反模式之前阅读源码——先读代码会产生锚定偏差anchoring bias让 Agent 把现有实现默认为合理而错过更优方案。正确的执行顺序是先读references/下的参考文件装载检测模式再用 Grep/Glob 全库扫描命中后仅读取 5–10 行上下文确认问题最后基于最佳实践而非现有代码给出修复方案。Bundle Dependencies包体积与依赖是其中的第五个 Agent表格第 5 行其职责定义原文为Heavy imports, unused deps, duplicate libs, missing lazy loading它所依据的检测模式清单正是 bundle-dependencies.md。所有模式均为语言与生态无关的通用正则可在 JavaScript/TypeScript、Python、Go 等任何项目的源码目录中直接执行。二、先扫技术栈让模式匹配到正确的生态在投入扫描之前技能要求先用 Glob 识别项目技术栈SKILL.md 的 Step 1使依赖审计聚焦到实际存在的生态例如探测目标Glob 模式推断技术栈**/package.jsonNode.js / JS / TS检查 React、Next.js、Express 等**/requirements.txt、**/pyproject.toml、**/setup.pyPython**/go.modGo**/Cargo.tomlRust**/pom.xml、**/build.gradleJava**/GemfileRuby**/webpack.config.*、**/vite.config.*、**/tsconfig.json构建工具技术栈结果随后注入各 Agent 的提示词{DETECTED_STACK}用于过滤与本项目无关的检测模式——例如纯 Python 项目就不必关心lodash。三、六大检测模式详解bundle-dependencies.md将包体积反模式划分为六类每类都给出了可直接执行的 Grep/Glob 正则。下面逐类说明模式的语义、正则写法与性能成因。3.1 Heavy Imports重量级库被全量导入第一类检测重导入核心是把本可按需引入的大库整体拉进 bundleimport\s\w\sfrom\s[]lodash[] (full lodash import vs lodash/specific) import\s\w\sfrom\s[]moment[] (moment.js - use date-fns/dayjs) import\s\w\sfrom\s[]underscore[] (underscore - mostly native now) import\s\*\sas (wildcard imports prevent tree-shaking) require\([]lodash[]\) (CJS lodash import) from\spandas\simport\s\* (full pandas import) import\stensorflow (full TF import) import\sboto3 (full AWS SDK)逐条解读其性能影响lodash全量导入import _ from lodash会把整个库打包进主 chunk。正确姿势是lodash-es/specific按需导入或直接使用原生等价物Array.find、Object.entries等。仓库内的 bundle-barrel-imports.md 同样把lodash列入应避免从入口桶文件导入的高风险库名单。moment.js体积约为替代品的 10 倍应替换为date-fns或dayjs。underscore其绝大多数工具函数已被原生 JavaScript 覆盖Array.prototype.find、Object.entries、Array.from等属于基本无需再引入的库。通配符导入import * as会阻止 tree-shaking摇树优化发挥作用因为打包器无法静态判定哪些具名导出未被使用。Python 侧全量导入from pandas import *、import tensorflow、import boto3都会在启动时加载整个重型模块Boto3AWS SDK尤其如此应当按服务子模块或使用延迟导入。3.2 Unused Dependencies声明了却从未使用的依赖# Check package.json dependencies vs actual imports # Check requirements.txt vs actual imports # Check go.mod vs actual imports import.*from.*[] (cross-reference with package.json)这是交叉引用式检测用正则import.*from.*[]抓取源码中所有实际导入的包名再与package.json/requirements.txt/go.mod中声明的依赖做差集。命中的声明但未导入依赖应当从清单中删除——它们白白占用安装时间、锁文件体积还可能引入供应链漏洞暴露面。技能 SKILL.md 建议对每个发现项读取 5–10 行上下文确认确实是死依赖后再报告。3.3 Duplicate Functionality同一职责多个库并存# Multiple date libraries moment.*\n.*date-fns (both moment and date-fns) moment.*\n.*dayjs (both moment and dayjs) # Multiple HTTP clients axios.*\n.*node-fetch (both axios and fetch) axios.*\n.*got (both axios and got) # Multiple utility libraries lodash.*\n.*underscore (both lodash and underscore) # Multiple state managers redux.*\n.*mobx (both redux and mobx) zustand.*\n.*jotai (multiple state libs)这里运用了跨行正则\n连接两个模式检测同一关注点被多个库同时覆盖的冗余。每类场景的处理原则相同每个关注点只保留一个库——保留体积更小、生态更活跃、与项目架构更契合的那一个删除其余。日期库保留date-fns/dayjs之一HTTP 客户端保留axios/fetch/got之一现代 Node 与浏览器原生fetch常已足够工具库在lodash与underscore中二选一状态管理在redux/mobx/zustand/jotai中收敛为一个。3.4 Dev Dependencies in Production开发依赖与调试代码混入生产# devDependencies imported in src/ import.*from.* # Debug/test code in production console\.log\( console\.debug\( debugger; \.only\( (test.only left in)两个子类生产源码导入 devDependencies正则匹配testing、jest、mocha、chai、sinon、cypress、storybook等测试/故事书包在生产路径src/下出现。这会把这些依赖连同其传递依赖一起打进生产 bundle显著膨胀体积。调试残留console.log/console.debug、debugger;、.only(如it.only、test.only遗留。这与 build-compilation.md 中Development-Only Code in Production一节的模式完全一致后者还补充了console.trace、.skip(、__DEV__等模式并建议用构建插件如babel-plugin-transform-remove-console在构建期统一剥离。3.5 Dynamic Imports Missing本应懒加载却被静态引入# Large components imported statically that could be lazy import.*Modal (modals are great candidates for lazy loading) import.*Chart (charts are heavy) import.*Editor (rich editors are heavy) import.*PDF (PDF libs are heavy) import.*Map (map components are heavy) # Route-level components not lazy loaded import.*Page.*from (page components should often be lazy)此类命中体积大、首屏不需要的组件被静态导入Modal弹窗、Chart图表库、Editor富文本/代码编辑器、PDF渲染库、Map地图组件是典型的懒加载候选路由级页面组件import.*Page.*from也应按路由拆分。仓库内的 bundle-dynamic-imports.md 给出了这个主题的实战样板——以 Monaco 编辑器为例// 错误Monaco 被打进主 chunk约增加 300KB import { MonacoEditor } from ./monaco-editor function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }// 正确Monaco 按需加载 import dynamic from next/dynamic const MonacoEditor dynamic( () import(./monaco-editor).then(m m.MonacoEditor), { ssr: false } ) function CodePanel({ code }: { code: string }) { return MonacoEditor value{code} / }该规则被标记为 CRITICAL 级因为其直接影响 TTI交互时间与 LCP最大内容绘制。3.6 Large Assets未优化的静态资源# Check for unoptimized assets \.png[] (check if could be webp/avif) \.jpg[] (check if could be webp/avif) \.gif[] (check if could be video/webp) \.svg[].*import (SVGs imported as modules - check size) base64 (inline base64 assets) data:image (inline images)针对资源体积.png/.jpg检查能否转为 WebP/AVIF通常可节省 30%–80% 体积.gif考虑转为视频或 WebP被当作模块导入的.svg需要核查尺寸base64与data:image标记的是内联图片——内联在 JS bundle 中会放大主包体积并阻碍缓存复用。四、七大改进策略从命中到落地bundle-dependencies.md在检测清单之外给出了 7 条策略对应上面的各类命中Lodash改用lodash-es/specific按需导入或直接用原生等价物Array.find、Object.entries等。Moment.js替换为date-fns或dayjs体积小约 10 倍。通配符导入改用具名导入以启用 tree-shaking。未使用依赖从package.json/requirements.txt/go.mod中删除。动态导入对重型、首屏以下的组件使用React.lazy/import()。图片转换为 WebP/AVIF使用响应式srcset对首屏以下图片懒加载。重复库每个关注点只保留一个库。当这些策略在审计报告中被汇总时技能要求按严重级别CRITICAL HIGH MEDIUM LOW排序再按文件分组输出当前代码—为什么慢—最优修复—预期影响四元组SKILL.md 的 Agent Prompt Template 与 Report Format使包体积修复能直接进入按文件逐条执行的改进计划。五、与仓库内其他规则的配套使用包体积治理在 gsd-2 的规则体系中并非孤立存在与本参考文件强相关的配套规则包括bundle-barrel-imports.md禁止桶文件barrel file导入。像lucide-react、mui/material这类库的入口可能包含上万个再导出仅导入行为就可能耗时 200–800ms。推荐的修复是直接导入深层路径lucide-react/dist/esm/icons/check或使用 Next.js 的optimizePackageImports在构建期自动转换受影响的常见库名单与bundle-dependencies.md高度重合lodash、date-fns、react-icons等。bundle-dynamic-imports.md提供next/dynamic/React.lazy的完整代码样板。build-compilation.md覆盖构建期维度的同主题——生产模式缺失、devtool: source-map泄漏、splitChunks关闭、sideEffects: true阻断 tree-shaking、CI 无缓存等并补充了大型/慢速启动导入import tensorflow、import pandas等与慢测试套件--runInBand、-p no:xdist模式。六、实际使用流程小结要在实际项目上运行这套包体积与依赖审计完整流程可归纳为用 Glob 确认技术栈package.json/requirements.txt/go.mod等把 bundle-dependencies.md 中的正则分批执行于源码目录先扫六类反模式重导入、未用依赖、重复库、生产中的开发依赖、缺失懒加载、大资源对每个命中项读取 5–10 行上下文排除误报按 3.4/五节中的配套规则决定修复手段命中项标注文件:行号、严重级别、当前代码、性能成因、最优修复与预期影响汇总报告时按严重级别排序、按文件分组形成从高到低影响的改进计划。需要说明的是这份参考文件是code-optimizer技能内部供并行 Agent 装载的检测模式清单文中涉及的具体性能数字如moment 小 10 倍Monaco 约 300KB导入耗时 200–800ms均出自 bundle-dependencies.md 及其配套规则文件的原始表述属于该技能文档给出的参考估值具体收益会随项目与版本不同而波动落地时建议以本项目的实际测量为准。赞分享人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载相关推荐gsd-2 代码优化 Skill 实战用 Grep/Glob 模式扫描缓存与记忆化反模式gsd 2 代码优化 Skill 实战用 Grep/Glob 模式扫描缓存与记忆化反模式 导读 本指南以 gsd 2 仓库内置的 code optimizer人工智能AI Agent代码智能体Agent 编排CLIAI 应用Notepad Markdown语法高亮终极指南10主题提升你的写作效率Notepad Markdown语法高亮终极指南10主题提升你的写作效率 还在为Notepad中单调的Markdown编辑体验而烦恼吗markdo开发工具CLIGSD 代码优化技能实战用 Grep/Glob 模式审计算法复杂度反模式GSD 代码优化技能实战用 Grep/Glob 模式审计算法复杂度反模式 本文以 gsd 2 仓库内置的 code optimizer 技能中 algorit人工智能AI Agent代码智能体Agent 编排CLIAI 应用上一篇Vue Vant模板完全指南快速构建移动端应用下一篇Android离线语音识别5步集成Whisper与TensorFlow Lite创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询