详解3种webpack中常用的JS压缩插件


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家详细介绍一下webpack中的3种常用JS压缩插件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

(1)UglifyJS

支持: babel present2015webpack3

缺点:

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

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

使用:

npm i uglifyjs-webpack-plugin

1

2

3

4

5

6

7

8

9

10

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文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

// 引入 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、说明

  • test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是 /.js$/.

  • include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件,默认为 [].

  • exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件,默认为 [].

  • cacheDir: 缓存压缩后的结果,下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回,cacheDir

  • 用于配置缓存存放的目录路径。默认不会缓存,想开启缓存请设置一个目录路径。

  • workerCount:开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。

  • sourceMap:是否为压缩后的代码生成对应的Source Map, 默认不生成,开启后耗时会大大增加,一般不会将压缩后的代码的

  • sourceMap发送给网站用户的浏览器。

  • uglifyJS:用于压缩 ES5 代码时的配置,Object 类型,直接透传给 UglifyJS 的参数。

  • uglifyES:用于压缩 ES6 代码时的配置,Object 类型,直接透传给 UglifyES 的参数。

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

1

2

3

4

5

6

7

8

9

new ParallelUglifyPlugin({

  uglifyJS: {},

  test: /.js$/g,

  include: [],

  exclude: [],

  cacheDir: '',

  workerCount: '',

  sourceMap: false

});

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

1.png

(3)terser-webpack-plugin

支持: babel7webpack4

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

优点:

  • 和ParallelUglifyPlugin一样,并行处理多个子任务,效率会更加的提高。

  • webpack4官方推荐,有人维护。

使用:

1

npm install terser-webpack-plugin --save-dev

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

2.png

更多编程相关知识,请访问:编程视频!!

以上就是详解3种webpack中常用的JS压缩插件的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

分享webpack实例教程

webpack打包css出错怎么办

react webpack是什么

webpack 入门教程

如何解决webpack css url报错问题

webpack对html文件的处理

使用webpack构建一个js库

详解3种webpack中常用的js压缩插件

vue+webpack2实现路由懒加载的方法介绍

webpack4新增了哪些东西?需要注意些什么?

更多相关阅读请进入《webpack》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...