按照
看起來其中一個檔案被匯入的第一個地方（比方說App.tsx）是所有庫被加載的地方，即使只有一個應該被匯入（在我的意圖中）。
我想補充一點，即使使用庫的組件是通過 React Suspense 動態加載的，這種情況也會發生：
樣本來自App.tsx
const PackagingComponent = lazy(
() => import('src/components/PackagingComponent' /* webpackChunkName: "packaging" */)
);
接著
<ErrorBoundary locale={props.locale}>
<Suspense fallback={<Loader />}>
{props.componentType === AcceptedComponentTypes.PACKAGING && (
<DesignStackPackaging
locale={props.locale}
tenant={props.tenant}
/>
)}
{/* ...other conditions */}
</Suspense>
</ErrorBoundary>
解決方案？
如果我洗掉索引檔案中的匯出（專案中有兩個，一個用于通用腳本，另一個用于掛鉤）并直接匯入模塊，問題就會消失。
部分/hooks/index.ts
export {};
部分Packaging.tsx
import useSections from 'src/hooks/useSections';
import useArtworkEvents from 'src/hooks/useArtworkEvents';
import useEventBusListener from 'src/hooks/useEventBusListener';
可以看到問題似乎解決了：
所以我要問兩件事：
- 有誰知道為什么會這樣？
- 有沒有更方便的公開模塊的方法（無需為每個新匯入添加新行）？
我想也許我可以將所有匯入大型庫的模塊放在一個單獨的檔案夾中，在那里我不使用索引檔案匯出它們，同時將較小的模塊保存在一些我使用索引檔案匯出它們的公共檔案夾中，但我不喜歡這個解決方案，因為它讓人感覺不一致，而且不了解的同事可能會收回這個問題。
對于背景關系，我還添加了 Webpack Split Chunks 配置：
splitChunks: {
chunks: 'all',
name: true,
},
（順便說一句，如果name設定為 ，也會發生同樣的情況false）。
uj5u.com熱心網友回復：
因此，在發布問題后，我在相關部分找到了另一個問題：Barrel file and Tree Shaking，這讓我明白index我所指的檔案有一個名稱，即barrel files，并且那里是關于這個主題的各種文章。
例如，這篇文章建議不要使用桶檔案，因為它們會導致搖樹優化問題。
幸運的是，我發現了這個 Github 問題（在Next.js存盤庫中）以及針對我的特定問題的解決方案。
解決方案是關閉桶檔案的副作用，這樣Webpack就不會在每次需要一個模塊時加載整個檔案夾。
所以在我的例子中， Webpack配置的相關部分變成了：
{
module: {
rules: [
// other rules...
{
test: [/src\/common\/index.ts/i, /src\/hooks\/index.ts/i],
sideEffects: false,
}
]
}
}
其他一切都保持不變。
最后，我想參考給出解決方案的同一用戶的回復的一部分：
桶檔案實際上是一個 API。區分私有代碼和公共代碼的特定介面。它在帶有本地包的 monorepo 中特別有意義。同樣的概念（為什么包有一個特定的匯入介面）優點/缺點適用于 monorepo 包。
所以最后我很慶幸我能夠保留桶檔案而不必單獨匯入每個模塊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/537014.html
上一篇：single-spa-angular與另一個angular應用程式共享angularlibaray（帶UI）會出錯
下一篇：如何將webpack配置添加到single-spa生成的webpack組態檔[single-spa angular14]