typescriptのmangle

Recent posts

https://zenn.dev/mizchi/articles/mangle-best-practice

mangle 外からアクセスされない変数を1〜2文字に縮める事。

// in
const longLongVar = 1;
console.log(longLongVar);

// out
const o = 1;console.log(o);

enum

TSのenumは以下のように出力される。

// TS
enum XXX {
  AAA,
  BBB,
  CCC
}

// JS
var XXX;
(function (XXX) {
    XXX[XXX["AAA"] = 0] = "AAA";
    XXX[XXX["BBB"] = 1] = "BBB";
    XXX[XXX["CCC"] = 2] = "CCC";
})(XXX || (XXX = {}));

構文解析で定数の折りたたみができず、ビルドサイズが増える。

constを付ける事で回避できる。

// TS
const enum XXX {
  AAA,
  BBB,
  CCC
}
console.log(XXX.AAA);

// JS
console.log(0 /* XXX.AAA */);

だたしconstはXXX[XXX.AAA]で元キーを取得できない、オブジェクト実体がないのでモジュール外にexportできない制約があるよう。

Hard Private

Hard Private(#)はtarget:es2022未満で出力した場合、ダウントランスパイルの出力が大きくなる。 できるならes2022を指定する。

var e;"function"==typeof SuppressedError&&SuppressedError;e=new WeakMap,console.log(new class{constructor(){e.set(this,void 0),function(e,r,t,o,s){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!s:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===o?s.call(e,t):s?s.value=t:r.set(e,t)}(this,e,1,"f")}});class r{constructor(){this.t=new r}o(){console.log(0)}}class t{constructor(){this.t=new r}publicMethod(){this.t.o()}}(new t).publicMethod();export{t as XXX};

es2017

targetはes2017以降にする。 ポリフィルコードのサイズが減る。

es2017未満をサポートしたい場合はimportHelpers:trueを指定してポリフィルコードを外出しにして、再利用可能にする。