terser の __MANGLE_PROP__ の挙動を確かめる

この設定がベース

// edit terser options
{
  module: true,
  compress: {},
  mangle: {
    properties: {
      only_annotated: true // これで有効化される
    }
  },
  output: {},
  parse: {},
  rename: {},
}

基本的にこのテストコードを参考にする https://github.com/terser/terser/blob/798135e04baddd94fea403cfaab4ba8b22b1b524/test/compress/mangleprops-mangleprop-annotation.js#L74

mizchi

class

export class Foo {
  /*@__MANGLE_PROP__*/ manglethis = "manglethis"
  dontmanglethis = "dontmanglethis"
}

output.js

export class Foo{t="manglethis";dontmanglethis="dontmanglethis"}

アノテーションを付けたキーが mangle される。想定通り。

object

export const foo = {
  /*@__MANGLE_PROP__*/ manglethis: "manglethis",
  dontmanglethis: "dontmanglethis"
};

export const foo={t:"manglethis",dontmanglethis:"dontmanglethis"};

object 版。ここも想定通り。

object 2

export const foo1 = {
  /*@__MANGLE_PROP__*/ manglethis: "manglethis",
  dontmanglethis: "dontmanglethis"
};

export const foo2 = {
  manglethis: "manglethis",
  dontmanglethis: "dontmanglethis"
};

export const foo1={t:"manglethis",dontmanglethis:"dontmanglethis"};export const foo2={t:"manglethis",dontmanglethis:"dontmanglethis"};

__MANGLE_PROP__ を一度つけると、おそらくそのキーが登録されて他のオブジェクトに波及する

mizchi

あとはテストコード読んだほうが理解は速いな...

mizchi

結論: 使いづらい。

まず、この設定を有効にしないといけなくて、他の mangle.properties 周りのオプションと干渉する。

    mangle = {
        properties: { only_annotated: true },
    };

また、構文解析するわけではないので、ソースコードに記述することで mangle.properties の対象を増やしてるイメージっぽい。

この例をみても、どのASTノードに対して記述してるか、かなり分かりづらい