JavaScript 体积优化核心是删冗余、提效率、按需加载，需结合构建工具压缩（Webpack/Vite/Rollup）、Tree Shaking、动态 import() 分割、依赖精简、Gzip/Brotli 及开发代码剔除等综合手段。
JavaScript 代码压缩和打包体积优化，核心是“删冗余、提效率、按需加载”。不是简单地把代码变短，而是让浏览器下载更少、解析更快、执行更高效。
使用构建工具自动压缩（推荐）
现代前端项目基本都用 Webpack、Vite 或 Rollup 等构建工具，它们内置或通过插件支持压缩：
- Webpack：默认在 production 模式下启用 TerserPlugin，自动压缩 JS、删除 console、注释、未使用变量等；可手动配置 terserOptions 控制压缩粒度（如保留特定注释、禁用某些混淆）。
-
Vite：生产构建（
vite build）默认使用 esbuild 做 minify（速度快），也可切换为 terser（兼容性更好）；在vite.config.ts中设置build.minify: 'terser'并配置terserOptions。 -
Rollup：配合
@rollup/plugin-terser插件，在 output 阶段压缩输出文件。
移除无用代码（Tree Shaking）
Tree Shaking 依赖 ES Module 静态结构，确保你的代码和依赖都以 ESM 形式导出/导入：
- 避免混用
require和import；库若提供 ESM 版本（如 lodash-es），优先使用它替代 lodash。 - 关闭 Babel 的 modules 转换（
modules: false），否则会把 import 转成 require，破坏静态分析。 - 在 package.json 中声明
"type": "module"或确保入口文件用 .mjs 后缀，有助于工具识别模块类型。
按需加载与代码分割
不要一次性加载全部 JS，用动态 import() 拆分代码块：
立即学习“Java免费学习笔记（深入）”；
- 路由级分割：React Router / Vue Router 中用
lazy(() => import('./Page'))； - 组件级分割：点击触发、弹窗、图表等非首屏内容延迟加载；
- 第三方库按需引入：比如
import { debounce } from 'lodash-es'，而非import _ from 'lodash'； - Webpack 中还可配置
splitChunks自动提取公共模块（如 vendor、runtime）。
其他关键优化点
压缩只是起点，还需关注资源本身和加载策略：
-
检查依赖大小：用
npm run analyze（Webpack Bundle Analyzer）或npx source-map-explorer dist/*.js查看包组成，定位“巨无霸”依赖； - 替换重型库：例如用 dayjs 替 moment，用 zustand/pinia 替 redux/vuex，用 clsx 替 classNames；
- 启用 Gzip/Brotli 压缩：服务端开启（Nginx、Vercel、Cloudflare 默认支持），可减少 60%+ 传输体积；
-
移除开发专用代码：用
process.env.NODE_ENV === 'production'包裹调试逻辑，构建时被完全剔除（Terser 自动识别）； - 避免内联大字符串或 Base64 资源：图片、字体尽量走独立文件 + HTTP 缓存，而非写进 JS。
不复杂但容易忽略。压缩不是终点，而是整个交付链路中的一环——从编码规范、依赖选择，到构建配置、部署策略，每一步都在影响最终体积。
