賞金將在 6 天后到期。此問題的答案有資格獲得 50聲望賞金。 Peter Gerdes想引起更多關注這個問題：
告訴我需要做什么來修復它。
我顯然對此感到很困惑，但是，我有一個模塊 FileAttachments 匯入（并且沒有其他人這樣做）相當數量的其他相當大的模塊。我希望當我使用 React.lazy（React 18）將該匯入更改為動態匯入時，webpack（5.72）會將僅該匯入所需的代碼分離到它自己的塊中。但它沒有做任何類似的事情。我為什么這么困惑？我只設定了一個入口點，但我認為動態匯入的重點是我不需要那樣分解它。
我將代碼更改為：
import {observer} from "mobx-react-lite"
import React, {useCallback, Suspense} from "react"
....
import {Box, Divider, Link, Typography} from "@mui/material"
// import FileAttachments from "Widgets/FileAttachments"
const FileAttachments = React.lazy(() => import("Widgets/FileAttachments"));
并將 use 正確放置在 Suspense 組件中
<Suspense fallback={<Box>Loading...</Box>}>
<FileAttachments attachments={pub.manuscript} editable={true} />
</Suspense>
我已經嘗試了幾乎所有 webpack 優化選項的變體。現在他們是：
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {}
},
runtimeChunk: 'single',
minimizer: [... //Long list of optimizatons to Terser and CssMinimizer
],
minimize: true
}
我還嘗試了有關從我的 babel 配置中洗掉提案動態匯入的所有建議。目前，生產如下，但我嘗試從預設中排除提案動態匯入并洗掉語法動態匯入和所有組合。
presets: [
'@babel/preset-env',
{
targets: {
"browsers": ["last 1 Firefox versions", "last 1 FirefoxAndroid versions", "last 1 edge versions", "last 1 Chrome versions", "last 1 and_chr versions", "last 1 Safari versions", "last 1 ios_saf versions"],
},
forceAllTransforms: false,
useBuiltIns: 'entry',
corejs: '3.8',
modules: 'auto',
bugfixes: true,
exclude: ['transform-typeof-symbol'],
}
],
plugins: [
['@babel/plugin-proposal-class-properties', {loose: false}], //, { loose: true }],
['@babel/plugin-transform-runtime', {helpers: false}],
["@emotion", emotionOptions],
[
"babel-plugin-direct-import",
{
"modules": [
"@mui/lab",
"@mui/system",
"@mui/material",
"@mui/icons-material"
]
}
],
'@babel/preset-react',
{
useBuiltIns: true
}
]
uj5u.com熱心網友回復：
以防萬一其他人遇到這個問題。問題的根本原因是我使用 react-rails 來安裝我的根 react 組件，一旦我挖掘了它使用的代碼，我發現它動態地需要模塊中的代碼（嘗試通過檔案名猜測你的組件在哪里）和這似乎難倒了 webpack。
一旦我拉出該代碼并簡單地手動創建/安裝我的根，它就一切正常。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/468858.html