# Savepoint：JSZip 本地化與 `sheet-4x4.js` 混淆 > 日期：2026-05-12 > 專案：`d:\www\docker\www\line_cut_tools`（Laravel 11 + Vite 7） > 主題：把 4×4 頁面唯一的外網依賴（JSZip CDN）換成專案內檔，並對 `sheet-4x4.js` 套用 Vite 端混淆，但保留 JSZip 與全域 API 不混淆。 > 前傳：[`savepoint_2026-05-12_4x4_CropAlpha純前端化.md`](./savepoint_2026-05-12_4x4_CropAlpha純前端化.md) --- ## 1. 一開始是如何提出需求與問題的 1. 第一輪：使用者貼上 [`resources/js/jszip.min.js`](../../resources/js/jszip.min.js) 與 [`resources/views/line-sticker/sheet-4x4.blade.php#L935`](../../resources/views/line-sticker/sheet-4x4.blade.php)，意圖把外網 CDN `` 改為走專案內既有的 `resources/js/jszip.min.js`。 2. 第二輪：詢問「可以混淆 `sheet-4x4.js` 嗎？」——需要評估技術可行性、效能成本與保護價值。 3. 第三輪：使用者選擇「方案 A」——以 Vite 插件 `vite-plugin-javascript-obfuscator` 進行混淆，但**只針對 `sheet-4x4.js`**，且 JSZip 保持原樣。 4. 第四輪：`savepoint` 收尾。 --- ## 2. 過程中是如何一步步引導、修正與優化的 ### 階段 A：JSZip CDN → 本地 1. **盤點現況**： - Blade 第 935 行載入 cdnjs JSZip，第 936 行接 `@vite(['resources/js/sheet-4x4.js'])`。 - `sheet-4x4.js` 第 1 行為 `const JSZip = window.JSZip;`，**依賴全域**。 - [`public/build/manifest.json`](../../public/build/manifest.json) 雖然有 `sheet-4x4.js` entry，但實際上是舊版殘留——當前 `vite.config.js` 只有 `app.css` + `app.js` 兩個 input，跑一次 `npm run build` 即會把 `sheet-4x4-*.js` 從 manifest 中移除。 2. **三點修正**： - 在 `sheet-4x4.js` 最上方加 side-effect import：`import './jszip.min.js';`，這支 UMD 會自動把 `JSZip` 掛到 `window`，下一行 `const JSZip = window.JSZip` 不必動。 - 移除 Blade 第 935 行的 CDN ``。 - 在 `vite.config.js` 把 `resources/js/sheet-4x4.js` 加進 `laravel({ input: [...] })`，否則 `npm run build` 不會輸出 chunk，`@vite()` 在 production 會壞。 2. 對 `sheet-4x4.js` 套用 Vite 端混淆（plugin: vite-plugin-javascript-obfuscator 3.x）： - 安裝：`npm i -D vite-plugin-javascript-obfuscator` - `include: ['resources/js/sheet-4x4.js']`，`exclude: [/node_modules/, /jszip\.min\.js$/]`，`apply: 'build'` - options：採「平衡強度」= compact + identifierNamesGenerator:'mangled' + renameGlobals:false + stringArray + stringArrayEncoding:['base64'] + stringArrayThreshold:0.75 + splitStrings(chunk=8)；**關閉** controlFlowFlattening / deadCodeInjection / debugProtection / selfDefending / numbersToExpressions（因頁面有像素掃描，CPU-bound，控制流平坦化會嚴重拖慢效能）。 - 必須保留 JSZip 不被混淆（已有 exclude 雙保險，且該檔是 import 進來、不會走 plugin 的 transform hook）。 3. 為了讓混淆後的程式仍能被 HTML `onclick="xxx()"` 呼叫，要求 `sheet-4x4.js` 在最末加一段： `Object.assign(window, { toggleRmbg, autoDetect, copyLinePrompt, doCrop, resetSel, clearAll, downloadAll, closeLb, closeLinePromptDialog, confirmCopyLinePrompt, onPromptBackdrop });` 配合混淆 options `renameGlobals: false`，這段 key 名會被保留為原名。 4. 驗證： - `npm run build` 成功且輸出 `public/build/assets/sheet-4x4-*.js`。 - 該 chunk 開頭仍是可讀的 JSZip 原碼（grep 找得到 MODULE_NOT_FOUND / pako / base64 等字串）。 - 該 chunk 結尾的 sheet-4x4 邏輯為短名 + stringArray 形式（grep 不應找到 detectBgColor / autoDetect / removeBackground 等原始函式名作為定義；它們只應作為 `Object.assign` 內的 key 出現）。 - 全部 11 個 blade `onclick` 函式（toggleRmbg / autoDetect / copyLinePrompt / doCrop / resetSel / clearAll / downloadAll / closeLb / closeLinePromptDialog / confirmCopyLinePrompt / onPromptBackdrop）都已包在 Object.assign 內。 - 體積成本：混淆前後增加 < 10% 為合格（甜蜜點 +4~5% gzip ≈ +9%）。 5. 提醒使用者： - 混淆 ≠ 安全；本頁無 API key/付費邏輯，僅止於擋低成本抄襲。 - 日後在 `sheet-4x4.js` 新增需要被 HTML `onclick` 呼叫的函式，**一定要加進 `Object.assign(window, {...})`**，否則 dev 正常但 production build 會 ReferenceError。 - 開發時 `npm run dev` 不混淆（apply:'build'），不影響 debug。 ```