webpack中常用的JS压缩插件有哪些

发布时间:2021-04-14 10:38:42 作者:小新
来源:亿速云 阅读:525

这篇文章给大家分享的是有关webpack中常用的JS压缩插件有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

这里 讲解 三种JS 打包插件:

(1)UglifyJS

支持: babel present2015webpack3

缺点:

它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树,再去应用各种规则分析和处理AST,导致这个过程耗时非常大)。

优点: 老项目支持(兼容 IOS10)

使用:

npm i uglifyjs-webpack-plugin

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
  ]
}

【推荐学习:javascript高级教程】

(2)webpack-parallel-uglify-plugin

支持: babel7webpack4

缺点: 老项目不支持(不兼容 IOS10)

优点:

ParallelUglifyPlugin插件则会开启多个子进程,把对多个文件压缩的工作分别给多个子进程去完成,但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了,并行处理多个子任务,效率会更加的提高。

使用:

1、npm i -D webpack-parallel-uglify-plugin

2、webpack.config.js文件

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
plugins: [
// 使用 ParallelUglifyPlugin 并行压缩输出JS代码
new ParallelUglifyPlugin({
// 传递给 UglifyJS的参数如下:
uglifyJS: {
output: {
/*
 是否输出可读性较强的代码,即会保留空格和制表符,默认为输出,为了达到更好的压缩效果,
 可以设置为false
*/
beautify: false,
/*
 是否保留代码中的注释,默认为保留,为了达到更好的压缩效果,可以设置为false
*/
comments: false
},
compress: {
/*
 是否在UglifyJS删除没有用到的代码时输出警告信息,默认为输出,可以设置为false关闭这些作用
 不大的警告
*/
warnings: false,

/*
 是否删除代码中所有的console语句,默认为不删除,开启后,会删除所有的console语句
*/
drop_console: true,

/*
 是否内嵌虽然已经定义了,但是只用到一次的变量,比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
 转换,为了达到更好的压缩效果,可以设置为false
*/
collapse_vars: true,

/*
 是否提取出现了多次但是没有定义成变量去引用的静态值,比如将 x = 'xxx'; y = 'xxx'  转换成
 var a = 'xxxx'; x = a; y = a; 默认为不转换,为了达到更好的压缩效果,可以设置为false
*/
reduce_vars: true
}
}
}),
]
}

3、说明

4、ParallelUglifyPlugin 实列会有以下参数配置项:

new ParallelUglifyPlugin({
  uglifyJS: {},
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '',
  workerCount: '',
  sourceMap: false
});

5、github地址(https://github.com/gdborton/webpack-parallel-uglify-plugin)

webpack中常用的JS压缩插件有哪些

(3)terser-webpack-plugin

支持: babel7webpack4

缺点: 老项目不支持(不兼容 IOS10)

优点:

使用:

npm install terser-webpack-plugin --save-dev
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        ecma: 5,
        warnings: false,
        parse: {},
        compress: {},
        mangle: true, // Note `mangle.properties` is `false` by default.
        module: false,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
        safari10: true
      }
    })
  ]
}

github地址: https://github.com/webpack-contrib/terser-webpack-plugin

webpack中常用的JS压缩插件有哪些

感谢各位的阅读!关于“webpack中常用的JS压缩插件有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 前端技术之:常用webpack插件
  2. webpack常用插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

webpack js

上一篇:css设置表格间距的方法

下一篇:css中设置图片大小的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》