Webpack에서 일반적으로 사용되는 3가지 JS 압축 플러그인에 대한 자세한 설명

이 글에서는 webpack에서 일반적으로 사용되는 3가지 JS 압축 플러그인에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

여기에서는 세 가지 JS 패키징 플러그인에 대해 설명합니다.

(1) UglifyJS

지원: babel presents2015, 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

단점:

단일 스레드 압축 코드를 사용하므로 여러 js 파일을 압축해야 하며 하나씩 압축해야 합니다. 따라서 정식 환경에서 코드를 패키징하고 압축하는 것은 매우 느립니다. (JS 코드를 압축하려면 먼저 코드를 객체 추상화로 표현되는 AST 구문 트리로 구문 분석한 다음 AST를 분석하고 처리하기 위해 다양한 규칙을 적용해야 하므로 이 프로세스가 매우 시간이 많이 걸리기 때문입니다. -소비) .

장점:

기존 프로젝트 지원(IOS10과 호환)

• 사용:

• npm i uglifyjs-webpack-plugin

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

  [권장 학습: javascript 고급 튜토리얼
]

(2) webpack-parallel-uglify-plugin

지원:

babel7 , webpack4

단점: 오래된 프로젝트는 지원되지 않습니다(IOS10과 호환되지 않음)

🎜장점: 🎜🎜🎜ParallelUglifyPlugin 플러그인은 여러 하위 프로세스를 열고 여러 파일 처리 압축 작업은 여러 하위 프로세스에 의해 완료되지만 각 하위 프로세스는 여전히 UglifyJS를 통해 코드를 압축합니다. 압축해야 할 병렬 처리에 지나지 않습니다. 여러 하위 작업을 병렬로 처리하면 효율성이 더욱 높아집니다. 🎜🎜🎜사용: 🎜🎜🎜1, npm i -D webpack-parallel-uglify-plugin🎜🎜2, webpack.config.js 파일 🎜

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, 설명 🎜🎜🎜🎜test: 정규식을 사용하여 ParallelUglifyPlugin으로 압축해야 하는 파일을 일치시킵니다. 기본값은 /.js$/.🎜🎜🎜🎜include: 정규식을 사용하여 ParallelUglifyPlugin으로 압축된 파일을 포함합니다. 기본값은 [입니다. ].🎜🎜🎜 🎜exclude: 정규식을 사용하여 ParallelUglifyPlugin으로 압축된 파일을 제외합니다. 기본값은 [].🎜🎜🎜🎜cacheDir: 다음에 동일한 입력이 발생하면 압축된 결과를 직접 가져옵니다. 캐시를 저장하고 반환합니다. 캐시Dir🎜🎜🎜🎜은 캐시가 저장되는 디렉터리 경로를 구성하는 데 사용됩니다. 기본적으로 캐시되지 않습니다. 캐싱을 활성화하려면 디렉터리 경로를 설정하세요. 🎜🎜🎜🎜workerCount: 여러 하위 프로세스를 시작하여 동시에 압축을 수행합니다. 기본값은 현재 실행 중인 컴퓨터의 CPU 코어 수에서 1을 뺀 값입니다. 🎜🎜🎜🎜sourceMap: 압축된 코드에 해당하는 소스 맵을 생성할지 여부입니다. 기본적으로 생성되지 않습니다. 활성화하면 일반적으로 압축된 코드의 🎜🎜🎜🎜sourceMap이 크게 늘어납니다. 장치 탐색을 위해 웹사이트 사용자에게 전송되지 않습니다. 🎜🎜🎜🎜uglifyJS: ES5 코드, 객체 유형을 압축할 때 구성에 사용되며 UglifyJS 매개변수에 투명하게 직접 전달됩니다. 🎜🎜🎜🎜uglifyES: ES6 코드, 개체 유형, UglifyES에 직접 전달된 매개변수를 압축하는 데 사용되는 구성입니다. 🎜🎜🎜🎜4. ParallelUglifyPlugin 실제 열에는 다음과 같은 매개변수 구성 항목이 있습니다: 🎜rrreee🎜5.github 주소(https://github.com/gdborton/webpack-parallel-uglify-plugin) 🎜🎜🎜🎜🎜 (3) terser-webpack- 플러그인 🎜🎜🎜🎜지원: 🎜 babel7, webpack4🎜🎜🎜단점: 🎜 이전 프로젝트에서는 지원되지 않음(IOS10과 호환되지 않음) 🎜🎜🎜장점: 🎜🎜🎜 🎜🎜 ParallelUglifyPlugin과 마찬가지로 여러 하위 작업을 병렬로 처리하면 효율성이 더욱 높아집니다. 🎜🎜🎜🎜webpack4는 공식적으로 누군가에 의해 권장되고 관리됩니다. 🎜🎜🎜🎜🎜사용처: 🎜🎜rrreeerrreee🎜github 주소: https://github.com/webpack-contrib/terser-webpack-plugin🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Webpack에서 일반적으로 사용되는 3가지 JS 압축 플러그인에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!