JavaScript代码压缩与打包能减小文件体积、提升加载速度，常用工具包括Webpack、Vite、Rollup和Terser，通过移除冗余字符、重命名变量、Tree Shaking和分块加载等优化手段，结合生产环境配置可显著提升网页性能。
在现代前端开发中，JavaScript代码压缩与打包是提升网页性能的关键步骤。随着项目规模扩大，代码文件越来越多，直接使用原始代码不仅加载缓慢，还会暴露源码逻辑。通过压缩和打包，可以有效减小文件体积、提升加载速度，并优化资源管理。
为什么需要JavaScript代码压缩
未经处理的JavaScript通常包含大量空格、注释、换行以及冗长的变量名，这些内容对开发者友好，但对浏览器加载并不高效。代码压缩就是通过工具移除不必要的字符，重命名变量，简化表达式，从而减小文件大小。
压缩带来的好处包括：
- 减少HTTP请求的数据量，加快页面加载
- 降低带宽消耗，尤其对移动端用户更友好
- 一定程度上防止源码被轻易阅读
常见的JavaScript打包与压缩工具
目前主流的打包工具不仅能合并多个JS文件，还能集成压缩功能，实现自动化构建流程。
立即学习“Java免费学习笔记（深入）”；
1. WebpackWebpack 是最流行的模块打包工具之一。它能将项目中的所有资源（JS、CSS、图片等）视为模块，并通过依赖关系进行打包。配合 terser-webpack-plugin，可在生产模式下自动压缩JavaScript代码。
示例配置片段：
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production', // 启用内置优化
optimization: {
minimize: true,
minimizer: [new TerserPlugin()]
}
};
2. Vite
Vite 利用浏览器原生 ES 模块支持，提供极快的开发启动速度。在构建阶段，Vite 使用 Rollup 进行打包，默认集成 Terser 实现代码压缩。
构建命令：
vite build
会自动生成压缩后的静态资源文件。
3. RollupRollup 更适合库的打包，支持 Tree Shaking（剔除未使用的代码），输出更干净的压缩结果。通过插件 rollup-plugin-terser 可启用压缩。
4. TerserTerser 是一个专门用于压缩ES6+代码的工具，是 UglifyJS 的继承者。可独立使用，也常被其他工具集成。
命令行使用示例：
terser input.js -o output.min.js --compress --mangle
如何优化压缩效果
仅仅启用压缩还不够，合理配置才能最大化收益。
- 启用 Tree Shaking：确保模块以 ES6 模块语法（import/export）编写，移除未引用的代码
- 分块打包（Code Splitting）：将代码拆分为按需加载的块，减少首屏加载时间
- 压缩配置调优：根据项目需求调整 Terser 的 compress 和 mangle 选项，平衡压缩率与兼容性
- 结合Source Map：生产环境压缩后保留映射文件，便于错误定位
基本上就这些。选择合适的工具并正确配置，能让JavaScript在保持功能完整的同时，达到最优的加载性能。不复杂但容易忽略。
