"sideEffects": [ "dist/*", "esm/**/style/*", "lib/**/style/*", "*.less" ], 的作用是什麼

龙陌發表於2024-04-01
IDE

這段配置出現在一個軟體包的 package.json 檔案中，具體是 "sideEffects" 欄位。這個欄位用於告知打包工具（如 Webpack、Rollup 等）哪些模組或檔案可能存在副作用（side effects），以便在進行 Tree Shaking（搖樹最佳化）時做出正確決策。

Tree Shaking 是一種最佳化技術，旨在在打包過程中去除那些在最終程式碼中未被引用的模組，以減小打包後的檔案大小。它依賴於 ES6 模組的靜態匯入匯出特性，能夠分析模組間的依賴關係，丟棄未使用的程式碼。

然而，某些模組可能包含副作用，即除了匯出可供外部使用的值之外，還在模組內部執行了其他操作，如全域性變數賦值、註冊事件監聽器、修改外部狀態等。這些副作用可能在模組被匯入時觸發，即使匯入者並未直接使用模組匯出的任何值。為了防止誤刪此類模組，需要在 sideEffects 欄位中明確指出。

回到您提供的配置：

"sideEffects": [
  "dist/*",
  "esm/**/style/*",
  "lib/**/style/*",
  "*.less"
]

這個配置說明了以下幾點：

  1. dist/*：表示 dist 目錄下所有檔案（萬用字元 * 表示任意檔名）都可能有副作用。
    這意味著打包工具在進行 Tree Shaking 時不應移除這些檔案中的任何程式碼，即使看起來未被直接引用。

  2. esm/**/style/* 和 lib/**/style/*：這兩個條目指定了 esm 和 lib 目錄下各級子目錄中 style 目錄下的所有檔案（同樣使用萬用字元 *）可能存在副作用。
    這可能是因為這些檔案包含了 CSS、CSS Modules 或其他樣式相關程式碼，它們可能在匯入時影響全域性樣式或透過 CSS-in-JS 方案動態注入樣式。

  3. *.less：表示所有以 .less 為副檔名的檔案都可能存在副作用。Less 是一種 CSS 前處理器，編譯後的 CSS 程式碼可能包含影響全域性樣式的規則，因此不應被 Tree Shaking 刪除。

總結起來，這段 "sideEffects" 配置告訴打包工具：在進行 Tree Shaking 時，對於 dist 目錄下的所有檔案，以及 esm 和 lib 目錄下 style 目錄內的所有檔案，以及所有 .less 檔案，
即使它們看似未被直接使用，也不應進行刪除，因為它們可能包含對全域性狀態或樣式有影響的副作用。這樣可以確保在最佳化程式碼體積的同時，避免意外移除可能引發問題的程式碼。

相關文章