npm本身不直接裁剪包体积，真正起作用的是构建工具链与专用优化工具；npmshit可一键移除node_modules中docs、tests、.map等冗余文件，实测缩减30%~60%体积。
npm 本身不直接处理包体积裁剪，真正起作用的是构建工具链 + 专用优化工具。关键不是“npm install 能不能变小”，而是安装后如何识别、剔除、压缩那些没被用到的代码和依赖。
清理 node_modules 中的无用文件
node_modules 占用大，往往是因为每个依赖包都自带文档、测试、示例、源码映射（.map）、TypeScript 类型声明（.d.ts）等非运行必需内容。这些不会被打包进最终 JS，却拖慢安装和构建速度。
- 使用 npmshit：一键移除测试、docs、examples、changelog.md、.md 等冗余文件，实测可缩减 30%~60% 体积
- 替代方案：
pnpm（硬链接共享依赖）或yarn --flat（扁平化去重），也能缓解重复安装问题 - 注意：不要手动删 node_modules 里的文件，容易破坏模块解析；必须用 npmshit 这类经过验证的工具
扫描并删除项目内未使用的代码/组件/资源
真正拖慢首屏加载的，是项目自己写的、但早已弃用却仍留在 src 或 public 下的文件——比如旧页面、废弃工具函数、没人引用的 Vue 组件、未使用的图片字体等。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用 knip 扫描：支持 JS/TS/Vue/Sass，能精准识别未被 import 的文件、导出、CSS 类、甚至未使用的依赖项
- 执行
npx knip --fix --fix-type files可生成待删文件列表，再人工核对后批量清理（切勿跳过确认步骤） - 配合
grep '^src\|^public'提取前端相关路径，避免误删配置或脚本
构建阶段自动剔除未使用代码（Tree Shaking）
这是最核心的一环——让打包器在生成最终 bundle 时，把“写出来但没被调用”的函数、组件、工具方法直接删掉。
立即学习“Java免费学习笔记（深入）”；
- 确保你用的是 ES6 模块语法（import/export），CommonJS（require/module.exports）无法做静态分析
- 检查第三方库是否提供 ESM 版本（看 package.json 的
"module"字段），否则 Tree Shaking 会失效 - Webpack/Vite 在 production 模式下默认启用 Tree Shaking，但需确认
sideEffects: false或显式声明副作用文件 - 避免写
import * as utils from './utils'这类全量导入，改用命名导入如import { debounce } from './utils'
按需加载 + 代码分割，让主包只装“刚够用”的东西
不是所有 JS 都得在首页就下载完。把非首屏逻辑拆出去，用户点到哪再加载哪，是降低 app.js 体积最立竿见影的方式。
- 路由级懒加载：Vue Router 写
component: () => import('./views/Admin.vue')；React Router 用lazy(() => import('./pages/Help')) - 组件级拆分：富文本、图表、PDF 渲染器这类重型模块，绑定到按钮点击或弹窗打开时再动态加载
- 第三方库自动分包：Webpack 的
splitChunks或 Vite 的manualChunks把 lodash、moment、ant-design 等抽成独立 chunk，利于长期缓存 - 单个 chunk 建议 ≥10 KB 再拆，太碎反而增加 HTTP 开销
