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() 拆分代码块：

• 路由级分割：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。

不复杂但容易忽略。压缩不是终点，而是整个交付链路中的一环——从编码规范、依赖选择，到构建配置、部署策略，每一步都在影响最终体积。