前端性能优化需通过打包与压缩减少文件体积和请求次数。1. 使用Webpack、Vite或Rollup等工具合并模块，实现高效打包。2. 启用Terser进行JS压缩，去除空格、注释并混淆变量名，减小文件大小。3. 采用代码分割与懒加载，按需加载资源，降低首包体积。4. 利用Tree Shaking清除未使用代码，需基于ES6模块并标记sideEffects。合理配置构建工具可显著提升加载速度。
代码压缩和打包是前端性能优化的关键环节，尤其在JavaScript项目中尤为重要。通过压缩和打包，可以显著减少文件体积、降低HTTP请求次数，从而提升页面加载速度。以下是关于JavaScript代码压缩与打包优化的核心方法和实用建议。
1. 使用构建工具进行打包
现代前端开发离不开构建工具，它们能将多个JS文件合并为一个或多个bundle，减少网络请求。常用的工具有：
- Webpack：功能强大，支持模块化打包、代码分割、懒加载等高级特性。
- Vite：基于ES模块的新型构建工具，开发环境启动快，适合现代浏览器项目。
- Rollup：适合打包库文件，输出更干净、高效的代码。
合理配置这些工具，可以在打包阶段自动完成模块合并、依赖分析和资源优化。
2. 启用代码压缩（Minification）
压缩是指去除代码中的空格、换行、注释，并缩短变量名，从而减小文件体积。常见做法包括：
立即学习“Java免费学习笔记（深入）”；
- 使用Terser对JavaScript进行压缩，它支持ES6+语法，是目前最主流的JS压缩工具。
- 在Webpack中配置
optimization.minimize: true，默认会启用TerserPlugin。 - 设置压缩选项，如删除console、注释，启用混淆等，进一步缩小体积。
例如，在Webpack中自定义Terser配置：
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
},
format: {
comments: false
}
},
extractComments: false
})
]
}
3. 代码分割与懒加载
并不是所有代码都需要在首屏加载。通过代码分割（Code Splitting），可以将代码拆分为按需加载的块：
- 利用
import()动态导入实现路由级或组件级懒加载。 - 配置
splitChunks将公共依赖（如React、Lodash）抽离到独立文件，利于浏览器缓存。 - 第三方库可单独打包，避免业务逻辑更新时重复下载。
这样既能减少首包体积，又能提高整体加载效率。
4. 利用Tree Shaking清除无用代码
Tree Shaking是一种在打包阶段移除未使用代码的优化技术，前提是你使用ES6模块（import/export）。
- 确保代码模块化，避免副作用引入导致无法摇除。
- 在package.json中标记
"sideEffects": false，帮助构建工具识别可安全删除的文件。 - 避免在模块顶层执行不必要的逻辑，防止被误判为有副作用。
结合静态分析，Tree Shaking能有效减少最终输出的代码量。
基本上就这些。从打包策略到压缩细节，每一步都能带来性能提升。关键在于根据项目规模选择合适的工具链，并持续优化构建配置。不复杂但容易忽略。
