Webpack 不會 treeshake 未使用的命名導出對象（使用 Create React App）

Question

展示問題的小倉庫： https : //github.com/Huuums/repro-webpack-treeshaking-object-issue

我有一個customIcons.jsx文件，它導出一些 SVG 路徑（其中一些我可能會或可能不想在某些時候使用）。 我僅將 4 個圖標中的 2 個導出到App.js （在上面的示例中）。

import { abacus, addressBook } from './customIcons';

但是，當我現在運行yarn build ，包的大小就像我導入了所有 4 個圖標一樣大。 它根本不會改變，具體取決於我導入App.js圖標App.js 。 只有當我省略整個 import 語句（不從文件中導入任何內容）時，我才能看到main.[hash].chunk.js的包大小減小。

我在這里做錯了什么，webpack 不會對未使用的對象進行 treeshake 嗎？

Answer 1

https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

事實證明，您必須將您的包標記為“sideEffectfree”才能進行 treeshaking。

在 package.json 中設置"sideEffects": false問題。