webpack3 uglifyjs-webpack-plugin
时间: 2023-08-26 19:17:09 浏览: 45
uglifyjs-webpack-plugin 是一个 JavaScript 代码压缩工具,用于在 Webpack 构建过程中压缩 JavaScript 代码,减小代码体积并提高加载速度。它基于 UglifyJS 这个 JavaScript 压缩工具,并提供了 Webpack 插件来方便使用。该插件可以对 JavaScript 代码进行压缩、混淆、删除无用代码和注释等操作,可以大幅减小代码体积。
相关问题
terser-webpack-plugin与uglifyjs-webpack-plugin
terser-webpack-plugin与uglifyjs-webpack-plugin是两个用于压缩JavaScript代码的插件,都可以用于Webpack。
uglifyjs-webpack-plugin是一个旧的插件,它使用UglifyJS进行压缩。它已经被广泛使用了很长一段时间,并且在许多项目中仍然被使用。但是,它已经不再维护,而是由terser-webpack-plugin取代。
terser-webpack-plugin是一个新的插件,它使用Terser进行压缩。它比uglifyjs-webpack-plugin更快,同时也支持ES6语法。它也有更好的默认设置,可以更好地优化代码。
综上所述,如果你需要在Webpack中压缩JavaScript代码,应该使用terser-webpack-plugin。如果你目前正在使用uglifyjs-webpack-plugin,应该考虑升级到terser-webpack-plugin。
uglifyjs-webpack-plugin 怎么配置的
uglifyjs-webpack-plugin是一个用于压缩JavaScript代码的webpack插件,可以帮助减小打包后的文件体积,提高页面加载速度。以下是uglifyjs-webpack-plugin的配置方法:
1. 安装uglifyjs-webpack-plugin:
```shell
npm install uglifyjs-webpack-plugin --save-dev
```
2. 在webpack配置文件中引入uglifyjs-webpack-plugin:
```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// ...
plugins: [
new UglifyJsPlugin({
// UglifyJsPlugin的配置选项
})
]
}
```
3. 配置UglifyJsPlugin的选项:
```javascript
new UglifyJsPlugin({
test: /\.js($|\?)/i, // 匹配要压缩的文件
exclude: /\/excludes/, // 排除不需要压缩的文件
cache: true, // 启用缓存
parallel: true, // 并行压缩
sourceMap: true, // 生成sourceMap文件
uglifyOptions: { // UglifyJS的配置选项
compress: {
drop_console: true, // 去掉console.log
drop_debugger: true, // 去掉debugger语句
},
output: {
comments: false, // 去掉注释
beautify: false, // 压缩代码
}
}
})
```
以上是uglifyjs-webpack-plugin的基本配置方法,可以根据实际需求进行相应的调整。需要注意的是,由于uglifyjs-webpack-plugin使用的是UglifyJS进行代码压缩,因此压缩效果可能会受到UglifyJS版本的影响。如果需要更加强大和稳定的压缩工具,可以考虑使用其他工具,比如Google Closure Compiler。