Webpack 和 React.lazy 没有拆分动态导入。为什么？

Question

我显然对此很困惑，但是，我有一个模块 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 配置中删除 proposal-dynamic-import 的建议。目前，生产情况如下，但我尝试从预设中排除建议动态导入并删除语法动态导入和所有组合。

   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
                }
          ]

Answer 1

以防其他人遇到这个问题。问题的根本原因是我使用 react-rails 来挂载我的根反应组件，一旦我挖掘了它使用的代码，我发现它动态地需要来自你的模块的代码（试图通过文件名猜测你的组件在哪里) 这似乎难倒了 webpack。

一旦我提取了该代码并简单地 created/mounted 我的 root 手动它一切正常。

Webpack 和 React.lazy 没有拆分动态导入。为什么？

Webpack and React.lazy not splitting out dynamic import. Why?

reactjs

webpack

lazy-loading

react-lazy-load