【JavaScript】Terserを触ってみる

TerserというJavaScriptコードを圧縮・最小化するためのツールを知って使ったことがなかったので触ってみる

terser.org

基本的な使い方

$ terser -c -m -o output.js -- input.js

オプション

• -c: コードを圧縮
• -m: 関数名などの名前を短い名前に変換
• -o output.js: 出力ファイル名を指定
• -- input.js: 入力ファイル名を指定

具体的な実行例

以下の内容が記載されたexample.jsファイルを作る

function greet(name) {
    console.log("Hello, " + name + "!");
}

function calculateSum(a, b) {
    return a + b;
}

const result = calculateSum(5, 3);
greet("World");
console.log("The sum is: " + result);

terserを実行

$ npx terser -c -m -o example.min.js -- example.js

example.min.jsが生成され、以下のように元のコードが1行に圧縮され、変数名も短縮されている

function greet(e){console.log("Hello, "+e+"!")}function calculateSum(e,l){return e+l}const result=calculateSum(5,3);greet("World"),console.log("The sum is: "+result);

さらに詳細な圧縮オプションを使用することもできる

• -c passes=2: 圧縮を2回行う
• -m --mangle-props: プロパティ名も短縮します

$ terser -c passes=2 -m --mangle-props -o example.advanced.min.js -- example.js

すると中身は以下のようにさらに圧縮された

function o(o){console.log("Hello, "+o+"!")}function n(o,n){return o+n}const t=n(5,3);o("World"),console.log("The sum is: "+t);

普段は、viteやwebpackを使っているのであまり意識することはないが、たまにライブラリ実装者の会話に出てきたりするのでちゃんと触っておきたい