reactjs - Webpack 代码分割以异步加载库中的 React 组件

Question

我们开发了一个React组件库供内部使用。该库使用 webpack 将所有内容捆绑到一个 bundle.js 中。该库作为 NPM 模块公开，供我们的应用程序使用，到目前为止一直运行良好。

最近我们添加了一个具有一些非常大的外部依赖项的网格组件。尽管我们的一些应用程序不需要库中的这个组件，但我们决定将其包含在最终的 bundle 中。这会对包的大小产生巨大的影响，所以我遵循了 Webpack 的 code splitting guide使用动态导入来分解网格组件。对于将此库作为 NPM 模块安装的应用程序，组件库包现在在 node_modules 中如下所示:

├── node_modules/                 
│   ├── [our component library]/                 
│   │   ├── Grid.js # Asynchronously loaded Grid component
│   │   ├── bundle.js # Main bundle
│   │   └── ... other files in component library bundle

构建应用程序时(也使用 Webpack)，网格组件似乎没有作为其自己的文件包含在最终包中。事实上，它根本没有被包含在内:

├── dist/                 
│   ├── main.js # App bundle
│   ├── vendor.js # Vendor bundle created with CommonChunksPlugin
│   └── ... other files in application bundle but no Grid.js

当尝试在使用异步加载的 Grid 组件的浏览器中加载页面时，Webpack 返回以下错误:

Error: Loading chunk 0 failed.
  at HTMLScriptElement.onScriptComplete (bundle.js:757)

本质上，这表示无法找到网格组件 block 。我究竟做错了什么？是否有可能像这样对 React 组件库进行代码拆分？

Answer 1

我用了https://webpack.js.org/guides/code-splitting/#dynamic-imports用于动态导入的 import() 和 require.ensure 语法。两者都运作良好。检查我的这个项目作为一个很好的例子https://github.com/croraf/myboiler 。

这个项目也是一个例子:https://github.com/croraf/nutrients-calculator 。但我把动态导入部分复杂化了一点。检查https://github.com/croraf/nutrients-calculator/blob/master/frontend/src/App.js和 https://github.com/croraf/nutrients-calculator/blob/master/frontend/src/routes/util/DynamicRoute.js文件。