Webpack 是目前流行的前端工程化打包工具，用于将多个 JavaScript、CSS、图片等资源进行打包，以提高网站性能。但是，这也会导致打包后的文件比原始文件大很多，给页面加载带来不必要的负担。这时，我们就需要使用 JavaScript 压缩来优化打包后的文件大小。
为什么要压缩 JavaScript？
JavaScript 是动态脚本语言，它可以在运行时动态生成代码、修改数据，并且支持无类型变量和动态绑定。但是，这些功能也带来了 JavaScript 文件体积过大的问题。
在一个 Web 应用程序中，可能会有大量 JavaScript 文件，如果这些文件没有进行压缩，则它们会占用大量的带宽，导致页面加载缓慢。而压缩 JavaScript 文件可以达到以下几个目的：
- 缩小文件体积，从而减少带宽的占用。
- 加快文件的加载速度，提高用户体验。
- 隐藏源代码，增加代码可读性，保护知识产权。
如何压缩 JavaScript？
Webpack 提供了多个插件来压缩 JavaScript，其中比较常见的有 UglifyJsPlugin 和 BabelMinifyWebpackPlugin。
UglifyJsPlugin
UglifyJsPlugin 是 Webpack 官方提供的插件，用于通过 UglifyJS 压缩 JavaScript。UglifyJS 是一个基于 JavaScript 的压缩工具，可以实现 JavaScript 代码的压缩、混淆、变量名替换等功能。使用 UglifyJsPlugin 可以将打包后的文件压缩到最小，从而提高网站性能。
使用 UglifyJsPlugin 的步骤如下：
- 安装插件：
npm install uglifyjs-webpack-plugin --save-dev
- 在 webpack.config.js 中配置插件：
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new UglifyJsPlugin()
]
};BabelMinifyWebpackPlugin
BabelMinifyWebpackPlugin 是 Webpack 的一个插件，用于通过 Babili 压缩 JavaScript。Babili 是一个基于 Babel 的压缩工具，可以将 ES6/ES2015+ 语法转换成 ES5 语法，并对代码进行压缩混淆、变量名替换等操作，以达到减小文件体积、提高网站性能的目的。
使用 BabelMinifyWebpackPlugin 的步骤如下：
- 安装插件：
npm install babel-minify-webpack-plugin --save-dev
- 在 webpack.config.js 中配置插件：
const BabelMinifyWebpackPlugin = require('babel-minify-webpack-plugin');
module.exports = {
plugins: [
new BabelMinifyWebpackPlugin()
]
};总结
JavaScript 压缩是优化 Webpack 打包的一个重要步骤，它可以减小文件体积、提高页面性能，加快文件的加载速度，也有一定的代码保护作用。通过 UglifyJsPlugin 和 BabelMinifyWebpackPlugin 插件，我们可以很方便地将 JavaScript 代码压缩到最小，提高 Web 应用程序的性能。
以上就是本文对于 Webpack 打包优化之 JavaScript 压缩的详细介绍，希望读者可以通过本文学习到如何优化打包后的文件大小，提高 Web 应用的性能。下面附上使用 UglifyJsPlugin 和 BabelMinifyWebpackPlugin 的示例代码供读者参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646edabd968c7c53b0d3e0ac