Ausführliche Erläuterung der drei häufig in Webpacks verwendeten JS-Komprimierungs-Plug-Ins

Dieser Artikel gibt Ihnen eine detaillierte Einführung in drei häufig verwendete JS-Komprimierungs-Plug-Ins im Webpack. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Hier erklären wir drei JS-Verpackungs-Plug-ins:

(1) UglifyJS

Unterstützung: babel present2015, webpack3babel 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
      }
    }),
  ]
}

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

（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

Nachteile:

Es verwendet einen Single-Thread-Komprimierungscode, was bedeutet, dass mehrere js-Dateien komprimiert werden müssen und jede Datei komprimiert werden muss. Daher ist das Packen und Komprimieren von Code in einer formalen Umgebung sehr langsam (da das Komprimieren von JS-Code zunächst das Parsen des Codes in einen AST-Syntaxbaum erfordert, der durch Objektabstraktion dargestellt wird, und dann die Anwendung verschiedener Regeln zur Analyse und Verarbeitung des AST, was diesen Prozess sehr zeitaufwändig macht -verbrauchend).

Vorteile:

Unterstützung für alte Projekte (kompatibel mit IOS10)

• Verwendung:

• npm i uglifyjs-webpack-plugin

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

  [Lernempfehlung: Javascript-Tutorial für Fortgeschrittene
]

(2) webpack-parallel-uglify-plugin

Unterstützung:

babel7 , webpack4

Nachteile: Alte Projekte werden nicht unterstützt (nicht kompatibel mit IOS10)

🎜Vorteile: 🎜🎜🎜Das ParallelUglifyPlugin-Plug-in öffnet mehrere untergeordnete Prozesse und Mehrere Dateien verarbeiten Die Komprimierungsarbeit wird von mehreren Unterprozessen abgeschlossen, aber jeder Unterprozess komprimiert den Code weiterhin über UglifyJS. Es ist nichts anderes als die parallele Verarbeitung, die komprimiert werden muss, um die Effizienz noch weiter zu steigern. 🎜🎜🎜Verwenden Sie: 🎜🎜🎜1, npm i -D webpack-parallel-uglify-plugin🎜🎜2, webpack.config.js Datei 🎜

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
      }
    })
  ]
}

🎜3, Beschreibung🎜🎜🎜🎜test: Verwenden Sie reguläre Ausdrücke, um zu ermitteln, welche Dateien von ParallelUglifyPlugin komprimiert werden müssen. Der Standardwert ist /.js$/.🎜🎜🎜🎜include: Verwenden Sie reguläre Ausdrücke, um von ParallelUglifyPlugin komprimierte Dateien einzuschließen. ].🎜🎜🎜 🎜exclude: Verwenden Sie reguläre Ausdrücke, um von ParallelUglifyPlugin komprimierte Dateien auszuschließen. Der Standardwert ist [].🎜🎜🎜🎜cacheDir: Wenn Sie das nächste Mal auf dieselbe Eingabe stoßen, rufen Sie die komprimierten Ergebnisse direkt ab den Cache und geben Sie sie zurück. CacheDir🎜🎜🎜🎜 wird verwendet, um den Verzeichnispfad zu konfigurieren, in dem der Cache gespeichert ist. Es wird standardmäßig nicht zwischengespeichert. Wenn Sie das Caching aktivieren möchten, legen Sie bitte einen Verzeichnispfad fest. 🎜🎜🎜🎜workerCount: Starten Sie mehrere Unterprozesse, um die Komprimierung gleichzeitig durchzuführen. Der Standardwert ist die Anzahl der CPU-Kerne des aktuell laufenden Computers minus 1. 🎜🎜🎜🎜sourceMap: Gibt an, ob die entsprechende Quellzuordnung für den komprimierten Code generiert werden soll. Wenn diese Option aktiviert ist, erhöht sich der Zeitverbrauch im Allgemeinen erheblich nicht zum Surfen an Website-Benutzer gesendet werden. 🎜🎜🎜🎜uglifyJS: wird für die Konfiguration beim Komprimieren von ES5-Code verwendet, Objekttyp, direkt transparent an UglifyJS-Parameter übergeben. 🎜🎜🎜🎜uglifyES: Konfiguration zum Komprimieren von ES6-Code, Objekttyp und Parameter, die direkt an UglifyES übergeben werden. 🎜🎜🎜🎜4. Die aktuelle Spalte von ParallelUglifyPlugin enthält die folgenden Parameterkonfigurationselemente: 🎜rrreee🎜5. Github-Adresse (https://github.com/gdborton/webpack-parallel-uglify-plugin) 🎜🎜🎜🎜🎜 (3) terser-webpack- Plugin 🎜🎜🎜🎜Unterstützung: 🎜 babel7, webpack4🎜🎜🎜Nachteile: 🎜 Alte Projekte werden nicht unterstützt (nicht kompatibel mit IOS10) 🎜🎜🎜Vorteile: 🎜🎜🎜 🎜🎜 und wie beim ParallelUglifyPlugin wird die parallele Verarbeitung mehrerer Teilaufgaben die Effizienz noch weiter steigern. 🎜🎜🎜🎜webpack4 wird offiziell von jemandem empfohlen und gewartet. 🎜🎜🎜🎜🎜Verwendung: 🎜🎜rrreeerrreee🎜Github-Adresse: https://github.com/webpack-contrib/terser-webpack-plugin🎜🎜🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der drei häufig in Webpacks verwendeten JS-Komprimierungs-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!