Merge pull request #109 from z0ffy/feature/compare-output-size

* feat: add code size analyzer

Author: z0ffy

src/index.ts

@@ -1,8 +1,8 @@
 import type { IndexHtmlTransformHook, PluginOption, Rollup } from 'vite';
 import { Config, ViteConfigFn } from './type';
 import {
+  CodeSizeAnalyzer,
   createWorkerTask,
-  formatTime,
   getChunkName,
   getManualChunks,
   getThreadPoolSize,
@@ -70,9 +70,10 @@ export default function viteBundleObfuscator(config?: Partial<Config>): PluginOp
   const transformIndexHtmlHandler: IndexHtmlTransformHook = async (html, { bundle }) => {
     if (!finalConfig.enable || !bundle) return html;
 
-    _log.forceLog('starting obfuscation process...');
-    const now = performance.now();
+    _log.forceLog(LOG_COLOR.info + '\nstarting obfuscation process...');
+    const analyzer = new CodeSizeAnalyzer(_log);
     const bundleList = getValidBundleList(finalConfig, bundle);
+    analyzer.start(bundleList);
 
     if (isEnableThreadPool(finalConfig)) {
       const poolSize = Math.min(getThreadPoolSize(finalConfig), bundleList.length);
@@ -91,8 +92,7 @@ export default function viteBundleObfuscator(config?: Partial<Config>): PluginOp
       });
     }
 
-    const consume = formatTime(performance.now() - now);
-    _log.forceLog(LOG_COLOR.info + '%s\x1b[0m %s', '✓', `obfuscation process completed in ${consume}.`);
+    analyzer.end(bundleList);
 
     return html;
   };

src/type.ts

@@ -1,5 +1,6 @@
 import type { ObfuscatorOptions } from 'javascript-obfuscator';
 import type { Plugin, Rollup } from 'vite';
+import { SizeUnit } from './utils/constants';
 
 export type ViteConfigFn = Plugin['config'];
 
@@ -10,6 +11,13 @@ export interface WorkerMessage {
   chunk: BundleList;
 }
 
+export type SizeResult = { original: FormatSizeResult; gzip: FormatSizeResult };
+
+export interface FormatSizeResult {
+  value: number;
+  unit: SizeUnit;
+}
+
 export interface ObfuscationResult {
   fileName: string;
   obfuscatedCode: string;

src/utils/constants.ts

@@ -44,7 +44,14 @@ export const VENDOR_MODULES = 'vendor-modules';
 
 export const CHUNK_PREFIX = 'vendor-';
 
+export enum SizeUnit {
+  B = 'B',
+  KB = 'KB',
+  MB = 'MB',
+}
+
 export const LOG_COLOR = Object.freeze({
   info: '\x1b[36m', // Cyan
   warn: '\x1b[33m', // Yellow
+  success: '\x1b[32m', // Green
 });

src/utils/index.ts

@@ -1,12 +1,14 @@
 import * as vite from 'vite';
 import { Rollup } from 'vite';
-import { BundleList, Config, ObfuscationResult } from '../type';
-import os from 'node:os';
-import { isBoolean, isFileNameExcluded, isObject } from './is';
 import { Worker } from 'node:worker_threads';
 import path from 'node:path';
+import os from 'node:os';
+import { gzipSync } from 'node:zlib';
 import javascriptObfuscator from 'javascript-obfuscator';
-import { CHUNK_PREFIX, VENDOR_MODULES } from './constants';
+
+import type { BundleList, Config, FormatSizeResult, ObfuscationResult, SizeResult } from '../type';
+import { isBoolean, isFileNameExcluded, isObject } from './is';
+import { CHUNK_PREFIX, LOG_COLOR, SizeUnit, VENDOR_MODULES } from './constants';
 
 export class Log {
   private readonly _log: (msg: string) => void;
@@ -133,3 +135,91 @@ export function createWorkerTask(finalConfig: Config, chunk: BundleList) {
     });
   });
 }
+
+export function formatSize(bytes: number): FormatSizeResult {
+  const units = Object.values(SizeUnit);
+  let i = 0;
+  while (bytes >= 1024 && i < units.length - 1) {
+    bytes /= 1024;
+    i++;
+  }
+  return {
+    value: Number(bytes.toFixed(2)),
+    unit: units[i],
+  };
+}
+
+export class CodeSizeAnalyzer {
+  private _log;
+  private originalSize: SizeResult;
+  private obfuscatedSize: SizeResult;
+  private startTime: number;
+  private endTime: number;
+
+  constructor(log: Log) {
+    this._log = log;
+    this.originalSize = this.createEmptySizeResult();
+    this.obfuscatedSize = this.createEmptySizeResult();
+    this.startTime = 0;
+    this.endTime = 0;
+  }
+
+  private createEmptySizeResult(): SizeResult {
+    return {
+      original: { value: 0, unit: SizeUnit.B },
+      gzip: { value: 0, unit: SizeUnit.B },
+    };
+  }
+
+  start(originalBundleList: BundleList): void {
+    this.startTime = performance.now();
+    this.originalSize = this.calculateBundleSize(originalBundleList);
+  }
+
+  end(obfuscatedBundleList: BundleList): void {
+    this.obfuscatedSize = this.calculateBundleSize(obfuscatedBundleList);
+    this.endTime = performance.now();
+    this.logResult();
+  }
+
+  private calculateBundleSize(bundleList: BundleList): { original: FormatSizeResult; gzip: FormatSizeResult } {
+    const { totalSize, gzipSize } = bundleList.reduce(
+      (acc, [, bundleItem]) => {
+        if (bundleItem.code) {
+          const { code } = bundleItem;
+          acc.totalSize += Buffer.byteLength(code, 'utf-8');
+          acc.gzipSize += gzipSync(code, { level: 9 }).byteLength;
+        }
+        return acc;
+      },
+      { totalSize: 0, gzipSize: 0 },
+    );
+
+    return {
+      original: formatSize(totalSize),
+      gzip: formatSize(gzipSize),
+    };
+  }
+
+  private analyze(): string {
+    const { originalSize, obfuscatedSize } = this;
+
+    const consume = formatTime(this.endTime - this.startTime);
+
+    const percentageIncrease = (
+      ((obfuscatedSize.original.value - originalSize.original.value) / originalSize.original.value)
+      * 100
+    ).toFixed(2);
+
+    const gzipPercentageIncrease = (
+      ((obfuscatedSize.gzip.value - originalSize.gzip.value) / originalSize.gzip.value)
+      * 100
+    ).toFixed(2);
+
+    return `✓ obfuscated in ${consume} | 📦 ${originalSize.original.value}${originalSize.original.unit} (gzip: ${originalSize.gzip.value}${originalSize.gzip.unit}) → 🔒 ${obfuscatedSize.original.value}${obfuscatedSize.original.unit} (gzip: ${obfuscatedSize.gzip.value}${obfuscatedSize.gzip.unit}) | 📈 ${percentageIncrease}% (gzip: ${gzipPercentageIncrease}%)`;
+  }
+
+  private logResult(): void {
+    this._log.forceLog(LOG_COLOR.success + '%s\x1b[0m', this.analyze());
+  }
+}