terser-esbuild-gulp

重要通知

。

Terser

适用于 ES6+ 的 JavaScript 解析器、管理器和压缩器工具包。

• 官网: https://terser.org/
• GitHub: https://github.com/terser/terser

安装配置

> npm install terser -g

构建打包

> terser test.js -o test.min.js -c

• 配置参数

-o 输出，output
-c 压缩，compress
-m 混淆，mix
-f ascii_only:true，保证代码中不出现中文字符

Esbuild

esbuild是一个由 Figma 的 CTO 「Evan Wallace」基于 Golang 开发的一款打包工具，相比传统的打包工具，主打性能优势，在构建速度上可以快10~100 倍。

• GitHub：https://esbuild.github.io

• 架构优势

  • 相比于单线程 + JIT 性质的解释型语言，Go可以充分利用多线程打包，并且线程之间共享内容，而 JS 如果使用多线程还需要有线程通信(postMessage)的开销。
  • 直接编译成机器码，而不用像 Node 一样先将 JS 代码解析为字节码，然后转换为机器码，大大节省了程序运行时间。
  • 内部打包算法充分利用多核 CPU 优势。

• 约束限制

  • 没有 TS 类型检查。
  • 不支持装饰器语法。
  • 不支持ES5编译转换。

• 安装配置

> pnpm install esbuild

Gulp

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

• 官网: https://gulpjs.com/
• 中文网站: https://www.gulpjs.com.cn/
• GitHub: https://github.com/gulpjs/gulp

安装配置

> npm install --global gulp-cli

# 查看版本
> gulp -v

构建打包

> gulp compress

gulpfile.js

const gulp = require('gulp');
const terser = require('gulp-terser');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');


function initConfig() {
  const inputPathFile = "/home/meta/public/tools-widgets/abandon-redeem/checkout_completed.js";
  const outputPath = inputPathFile.replace(/[^/]+$/, '');

  return gulp.src(inputPathFile)
    // 初始化 sourcemaps
    .pipe(sourcemaps.init())

    // 压缩代码
    .pipe(
      terser({
        compress: {
          drop_console: true, // 移除 console 语句
          drop_debugger: true // 移除 debugger 语句
        },
        format: {
          comments: false // 移除所有注释
        }
      })
    )

    // 加工处理
    .pipe(rename({ extname: '.min.js' }))

    // 生成 sourcemaps 文件
    .pipe(sourcemaps.write('.'))

    // 输出文件
    .pipe(gulp.dest(outputPath));
}


// 导出任务
exports.default = initConfig;

插件体系

gulp-terser

• GitHub: https://github.com/duan602728596/gulp-terser
• 压缩参数配置: https://github.com/terser-js/terser#minify-options

terser({
	compress: {
		drop_console: true, // 移除 console 语句
		drop_debugger: true // 移除 debugger 语句
	},
	format: {
		comments: false // 移除所有注释
	}
})