Explication détaillée de 3 plug-ins de compression JS couramment utilisés dans Webpack

Cet article vous donnera une introduction détaillée à 3 plug-ins de compression JS couramment utilisés dans webpack. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Voici trois plug-ins d'empaquetage JS :

(1) UglifyJS

Support : babel present2015, webpack3

Inconvénients :

Il utilise un code de compression à thread unique, ce qui signifie que plusieurs fichiers js doivent être compressés . Cela nécessite une compression fichier par fichier. Par conséquent, l'empaquetage et la compression du code dans un environnement formel sont très lents (car la compression du code JS nécessite d'abord d'analyser le code dans un arbre de syntaxe AST représenté par l'abstraction d'objet, puis d'appliquer diverses règles pour analyser et traiter l'AST, ce qui rend ce processus très long. -consommateur) .

Avantages : Support des anciens projets (compatible avec IOS10)

Utilisation :

npm i uglifyjs-webpack-plugin

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

[Apprentissage recommandé : Tutoriel avancé javascript]

(2) webpack-parallel-uglify-plugin

Support : babel7, webpack4

Inconvénients : Les anciens projets ne sont pas pris en charge (non compatibles avec IOS10)

Avantages :

Le plug-in ParallelUglifyPlugin ouvrira plusieurs sous-processus et attribuera le travail de compression de plusieurs fichiers à plusieurs sous-processus, mais chaque sous-processus compresse toujours le code via UglifyJS. Ce n'est rien de plus qu'un traitement parallèle qui doit être compressé. Le traitement de plusieurs sous-tâches en parallèle augmentera encore plus l'efficacité.

Utilisation :

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

2, webpack.config.jsFichier

// 引入 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, Description

• test : utilisez des expressions régulières pour correspondre aux fichiers qui doivent être compressés par ParallelUglifyPlugin. La valeur par défaut est /.js$/.

• include : utilisez Regular. expressions pour inclure les fichiers compressés par ParallelUglifyPlugin. Fichiers compressés, la valeur par défaut est [].

• exclure : utilisez des expressions régulières pour exclure les fichiers compressés par ParallelUglifyPlugin, la valeur par défaut est [].

  .

• cacheDir : mettez en cache le résultat compressé. La prochaine fois que vous rencontrerez la même entrée, récupérez le résultat compressé directement depuis le cache et renvoyez-le

• . est utilisé pour configurer le chemin du répertoire pour le stockage du cache. Il ne sera pas mis en cache par défaut. Si vous souhaitez activer la mise en cache, veuillez définir un chemin de répertoire.

• workerCount : démarrez plusieurs sous-processus pour effectuer une compression simultanément. La valeur par défaut est le nombre de cœurs de processeur de l'ordinateur en cours d'exécution moins 1.

• sourceMap : Indique s'il faut générer la carte source correspondante pour le code compressé. Lorsqu'elle est activée, la consommation de temps sera considérablement augmentée. ne pas être généré

• sourceMap envoyé au navigateur de l'utilisateur du site Web.

• uglifyJS : utilisé pour la configuration lors de la compression du code ES5, de type Objet, directement transmis de manière transparente aux paramètres UglifyJS.

• uglifyES : utilisé pour la configuration lors de la compression du code ES6, de type Objet, directement passé de manière transparente aux paramètres d'UglifyES.

4. L'instance ParallelUglifyPlugin aura les éléments de configuration de paramètres suivants :

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

5. - uglify-plugin)

(3) terser-webpack-plugin

Support : babel7 , webpack4

Inconvénients : Les anciens projets ne sont pas pris en charge (non compatibles avec IOS10)

Avantages :

• Comme ParallelUglifyPlugin, le traitement de plusieurs sous-tâches en parallèle augmentera l'efficacité.

• webpack4 est officiellement recommandé et maintenu par quelqu'un.

Utiliser :

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

adresse github : https://github.com/webpack-contrib/terser-webpack-plugin

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!