terser-webpack-plugin与uglifyjs-webpack-plugin
时间: 2023-10-15 12:07:42 浏览: 478
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。
相关问题
webpack 3 安装 terser-webpack-plugin什么版本
Webpack 3版本中安装`terser-webpack-plugin`需要选择一个与它兼容的特定版本,因为terser-webpack-plugin是在webpack4及以上版本中引入的一个用于压缩JavaScript的插件。对于Webpack 3,你应该使用`uglifyjs-webpack-plugin`作为替代品,这是一个类似的功能但支持老版本的库。
如果你想要压缩代码,可以这样做:
```bash
npm install uglifyjs-webpack-plugin --save-dev
```
然后,在Webpack配置文件`webpack.config.js`中集成这个插件:
```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true, // 是否生成Source Map
parallel: true, // 是否并行处理
}),
],
},
//...
};
```
Terser-Webpack-plugin的使用
Terser-Webpack-plugin 是一个用于压缩 JavaScript 代码的 Webpack 插件。它可以将 JavaScript 代码压缩成更小、更高效的形式,从而提高网页加载速度。
以下是使用 Terser-Webpack-plugin 压缩 JavaScript 代码的基本步骤:
1. 安装 Terser-Webpack-plugin:
```
npm install terser-webpack-plugin --save-dev
```
2. 在 webpack.config.js 中引入 Terser-Webpack-plugin:
```javascript
const TerserPlugin = require('terser-webpack-plugin');
```
3. 在 optimization 属性中配置 Terser-Webpack-plugin:
```javascript
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
```
在上面的代码中,我们通过 `minimizer` 属性指定要使用的压缩插件,然后创建一个新的 TerserPlugin 实例并将其添加到数组中。在 TerserPlugin 的构造函数中,我们可以配置一些选项来控制压缩行为。
4. 运行 webpack 命令来打包项目并压缩 JavaScript 代码:
```
webpack
```
运行完上面的命令后,Terser-Webpack-plugin 将会自动压缩 JavaScript 代码,并将结果输出到最终的打包文件中。
以上就是使用 Terser-Webpack-plugin 压缩 JavaScript 代码的基本步骤。需要注意的是,Terser-Webpack-plugin 压缩 JavaScript 代码可能会影响代码的可读性,因此在开发阶段建议不要开启该插件。
阅读全文