本篇文章给大家介绍一下 3 种 webpack 常用的 JS 打包插件. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
这里 讲解 三种 JS 打包插件:
(1)UglifyJS
支持: babel present2015,webpack3
缺点:
它使用的是单线程压缩代码, 也就是说多个 JS 文件需要被压缩, 它需要一个个文件进行压缩. 所以说在正式环境打包压缩代码速度非常慢 (因为压缩 JS 代码需要先把代码解析成用 Object 抽象表示的 AST 语法树, 再去应用各种规则分析和处理 AST, 导致这个过程耗时非常大).
优点: 老项目支持 (兼容 IOS10)
使用:
- NPM i uglifyjs-webpack-plugin
- module.exports = {
- plugins: [
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: true,
- compress: {
- warnings: false
- }
- }),
- ]
- }
- (2)webpack-parallel-uglify-plugin
支持: babel7,webpack4
缺点: 老项目不支持 (不兼容 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, 说明
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 实列会有以下参数配置项:
- new ParallelUglifyPlugin({
- uglifyJS: {},
- test: /.JS$/g,
- include: [],
- exclude: [],
- cacheDir: '',
- workerCount: '',
- sourceMap: false
- });
5,GitHub 地址 (https://github.com/gdborton/webpack-parallel-uglify-plugin)
(3)terser-webpack-plugin
支持: babel7,webpack4
缺点: 老项目不支持 (不兼容 IOS10)
优点:
和 ParallelUglifyPlugin 一样, 并行处理多个子任务, 效率会更加的提高.
webpack4 官方推荐, 有人维护.
使用:
- 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
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/javascript/17563.html