【React】FontAwesomeIcon按需引入TreeShaking攻略

前言

• 最近寫組件庫用了這玩意，但是實驗發現並不能treeShaking掉，於是來詳細探究下其中原因。

測試代碼

• 首先使用未按需引入的圖標進行實驗（按需引入是非默認導出+@fortawesome/free-solid-svg-icons/xxx)。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";

const element = <FontAwesomeIcon icon={faCoffee} />;

實驗1

• 只配置tser。
• 結論：
• 按需引入無效，treeshaking有效。
• 另外實驗了下，package.json裏配置sideEffects false和沒配置sideEffects不影響結果。

實驗2

• 使用 babel-plugin-transform-imports 按需導入：

{
    "plugins": [
      ["transform-imports", {
        "@fortawesome/free-solid-svg-icons": {
          "transform": "@fortawesome/free-solid-svg-icons/${member}",
          "skipDefaultConversion": true
        }
      }]
    ]
  }

• 加上使用tser進行壓縮。
• 結論：
• 按需引入有效，並且有treeShaking。stat時比正常大小要小，並且parse時會shaking掉一些。（這個按需引入的大小比手動按需引入的大小要大）
• package.json裏配置sideEffects false和沒配置sideEffects不影響結果。

實驗3

• 連tser都不配，直接打包。
• 結論：
• 按需引入無效，但是有treeShaking！我以前看別人寫的一直以爲tser是會根據package.json裏sideEffects進行treeShaking。其實treeShaking跟tser沒關係。

實驗4

• 使用ts-import-plugin，正常來說，babel-plugin-transform-imports有效，那麼ts-import-plugin也應該有效。

	tsImportPluginFactory({
		libraryName: "@fortawesome/free-solid-svg-icons",
				libraryDirectory: "",
				camel2DashComponentName: false,
}),

• 結論：
• 按上述配置配出來後按需引入有效，treeShaking有效

結論

• fontAwesome只要不是引入libarary，而是單個引入，正常情況下都會被treeShaking掉。
• 用戶配不配package.json沒關係，我看了一眼fontawesome的package.json，配置了sideEffect的。
• tser跟treeshaking無關。
• 寫庫最好是都寫一個文件夾裏然後每個組件一個子文件夾，這樣好配合按需引入插件。我得重構我的Icon去了。。。