什么是 代码压缩？
代码压缩是一种网页优化技术，通过移除源代码中的空白符、注释并缩短变量名来减小文件体积，同时保持代码功能不变。常用工具如 Terser 和 cssnano 可将 JavaScript 和 CSS 文件压缩 30-80%，显著提升页面加载速度。
快速了解
| 全称 | 代码压缩/最小化 |
|---|---|
| 创建时间 | 2009 年（YUI Compressor 时代） |
| 规范文档 | 官方规范 |
工作原理
代码压缩是网页开发中至关重要的优化技术，通过删除代码文件（JavaScript、CSS、HTML）中不影响执行的字符来减小文件大小。这包括移除空格、换行符、注释，有时还会缩短变量和函数名。压缩后的代码与原始代码功能完全相同，但体积显著减小，从而实现更快的下载速度和更少的带宽消耗。代码压缩与服务器级别的 gzip 压缩不同，大多数生产环境的网站会同时使用这两种技术。流行的压缩工具包括用于 JavaScript 的 Terser、用于 CSS 的 cssnano 和用于 HTML 的 html-minifier。压缩过程通常作为构建流程的一部分，使用 webpack、Rollup 或 Vite 等打包工具自动完成。
主要特点
- 移除空白符、换行符和注释
- 缩短变量和函数名（JavaScript 中）
- 完全保持代码功能不变
- 通常可减少 30-80% 的文件大小
- 使代码难以阅读（混淆副作用）
- 可通过 Source Map 还原以便调试
常见用途
- Web 应用的生产环境部署
- 优化 JavaScript 打包体积
- 减小 CSS 文件以加快渲染
- 最小化 HTML 以加快首屏加载
- CDN 和缓存优化
示例
Loading code...常见问题
代码压缩和 gzip 压缩有什么区别？
代码压缩（Minification）是从源代码中移除不必要的字符（空白符、注释、缩短变量名）来减小文件体积，而 gzip/Brotli 压缩是在服务器/传输层面进一步压缩传输数据的大小。这两种技术是互补的，通常在生产环境中同时使用。
代码压缩会影响代码功能吗？
不会。代码压缩完全保持代码的原有功能，它只移除执行时不需要的字符，如空白符、注释和格式化内容。压缩后的代码与原始源代码的行为完全相同。
如何调试压缩后的代码？
使用 Source Map（源码映射），它创建了压缩代码与原始源代码之间的映射关系。大多数构建工具（webpack、Vite、Rollup）可以自动生成 Source Map。在浏览器开发者工具中调试时，Source Map 允许你查看和调试原始的可读代码。
JavaScript 压缩有哪些常用工具？
流行的 JavaScript 压缩工具包括 Terser（推荐，被 webpack 和 Vite 使用）、esbuild（极快）和 SWC（基于 Rust，非常快）。对于 CSS，cssnano 和 clean-css 被广泛使用。对于 HTML，html-minifier-terser 是常见选择。
开发时需要压缩代码吗？
不需要。开发时不应该压缩代码，因为压缩后的代码难以阅读和调试。保持开发构建不压缩以便于调试，只在生产构建时应用压缩。大多数构建工具通过开发和生产的不同配置自动处理这一点。