Reactjs 反应代码拆分：ChunkLoadError:加载块0失败

我正试图在我的项目中引入代码拆分，但在使其正常工作时遇到了困难。我得到的错误是：

我有一个monorepo设置，带有一个

lib/

工作区，其中包含我正在创建的整个react库，还有一个

demo/

工作区，该工作区仅导入react模块并显示它，用于测试目的

我认为问题在于这两者如何相互作用，以及块在哪里被输出或其他什么，但我无法弄清楚

我的文件如下：

lib/webpack.config.js 文件夹结构 demo/package.json

---

尝试加载不可用的捆绑块时引发错误

据我所知，代码拆分用于应用程序，而不是库

对库使用代码拆分意味着您必须以

dist

的形式交付多个块，而不是像您的设置那样交付一个文件

    path: __dirname + '/dist',
    filename: 'index.js',

我不确定代码拆分是否适用于库，或者它有什么好处

在

demo

中使用代码拆分意味着

lib

中需要的片段将被捆绑在demo的块中。 您必须在

demo

中使用

React.lazy

，而不是在

lib

中，并且在构建

demo

时，每个

React.lazy

将生成一个新的捆绑包。

demo

可以访问所有的

lib

源文件（或单个文件区），并且只有所需的内容才会最终进入内置应用程序

我猜你在

lib

中使用了

React.lazy

，这会把事情搞混

我希望这有帮助

---

额外问题/信息：

为什么需要代码拆分？您的

demo

应用程序包是否变得太大

查看网页包，确保您的

lib

是可树摇动的：）这样您就可以在

demo

中使用代码拆分，而不用在

lib

中担心它

---

如果我答对了，您正在

lib

中使用

React.Lazy

<代码>演示可能有自己的网页配置。你也可以分享吗？@bamse

demo/

只是配置为一个简单的

react脚本

应用程序，没有任何自定义的网页配置。我更新了我的答案，加入了

demo/package.json

。当试图加载不可用的bundle块时，会抛出错误。我认为你的

演示

应用程序应该（并且确实）进行代码拆分。我不明白你怎么能把一个图书馆分成几块。在

lib

？1中使用

React.Lazy

。这并不是说

demo

应用程序越来越大，而是

lib

本身越来越大。当我为生产分发构建库时，我得到以下警告：

资产大小限制中的警告：以下资产超过了建议的大小限制（244 KiB）。这可能会影响web性能。index.js（1.73 MiB）

。所以我不想尽可能地提高性能，这就是为什么我不想做一些代码拆分。2.我也会看一看摇树的情况，但不要认为这会改善很多事情。你走的路是对的！该警告由

demo

build引发。在

demo

中使用

Reacl.lazy

将1.73MiB包拆分为多个较小的包。我只是想指出，这是您在

demo

中可以控制的。树抖动是webpack为了在生产捆绑包中只捆绑所需的代码而做的事情。这意味着它将只从

lib

中选择所需的内容。希望这是有意义的。首先，你可以忽略树摇晃。我认为在上下文中了解它是有意义的，但它也可能使事情复杂化。要修复错误：请确保在

demo

中使用

React.lazy

，而不是在

lib

Yeap！考虑到您的

lib

将用于内置应用程序，您应该探索其他库目标，以便使用它的应用程序只能获取它们使用的内容。考虑到您的场景，这可能是不可能的-有时这只是包的大小：）

lib/ // In this project we try to use code splitting using React.Lazy()
  package.json
  webpack.config.js
demo/ // Includes the lib module for testing purposes
  package.json
babel.config.js
package.json

{
  "name": "demo",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "maps": "link:../map/"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

    path: __dirname + '/dist',
    filename: 'index.js',