Zenn
Open5

JavaScriptのminifierにTerserを使ってみる

CLI
Web
JavaScript
四ツ山伊吹四ツ山伊吹

オプション

https://terser.org/docs/api-reference#minify-options

Minify options

[...]

  • compress (default {}) — pass false to skip compressing entirely.
    Pass an object to specify custom compress options.

  • mangle (default true) — pass false to skip mangling names, or pass
    an object to specify mangle options (see below).

    • mangle.properties (default false) — a subcategory of the mangle option.
      Pass an object to specify custom mangle property options.

[...]

こちらに従って、Terser REPLの左上のペインを次のように書き換える:

try.terser.org
// edit terser options
{
  compress: false,
  mangle: false,
}
四ツ山伊吹四ツ山伊吹

例

入力

input
const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

JavaScript object basics - Learn web development | MDN

出力

output
const person={name:["Bob","Smith"],age:32,bio:function(){console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`)},introduceSelf:function(){console.log(`Hi! I'm ${this.name[0]}.`)}};