Webpackでよく使われる3つのJS圧縮プラグインを詳しく解説-jsチュートリアル-php.cn

この記事では、webpack で一般的に使用される 3 つの JS 圧縮プラグインを詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Webpackでよく使われる3つのJS圧縮プラグインを詳しく解説

#ここでは 3 種類の JS パッケージ化プラグインを紹介します:

# (1) UglifyJS

# # サポート:

babel present2015、webpack3欠点:

シングルスレッドの圧縮コードを使用します、つまり、複数の js ファイルを圧縮する必要がある場合、1 つずつ圧縮する必要があります。したがって、正式な環境でのコードのパッケージ化と圧縮は非常に時間がかかります (JS コードを圧縮するには、まずコードをオブジェクト抽象化で表される 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.jsFile

// 引入 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: 圧縮コードに対応するソースマップを生成するかどうか。デフォルトでは生成されません。オンにすると、消費時間が大幅に増加します。一般的に、圧縮コードは
sourceMap は Web サイトユーザーのブラウザに送信されません。
uglifyJS: ES5 コード、オブジェクトタイプを圧縮する際の構成に使用され、UglifyJS パラメーターに直接透過的に渡されます。
uglifyES: ES6 コードを圧縮する際の設定に使用され、オブジェクトタイプで、UglifyES のパラメータに直接透過的に渡されます。

4. ParallelUglifyPlugin の実際の列には、以下のパラメータ設定項目があります:

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

ログイン後にコピー

(3) terser-webpack-plugin Webpackでよく使われる3つのJS圧縮プラグインを詳しく解説

サポート:

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

ログイン後にコピー

プログラミング関連の知識について詳しくは、

をご覧ください。！ Webpackでよく使われる3つのJS圧縮プラグインを詳しく解説