小编Prz*_*ski的帖子

我正在尝试按以下方式使用 splitChunks 插件拆分我的 React 代码（使用 create-react-app 创建）：

我有以下组件（JSX）结构：

• 服务
  • 服务A
    • 组分A1
    • 组分A2
    • 子文件夹
      • 组分A3
    • ...
  • 服务B
    • 组件B1
    • 组件B2
    • ...
  • 服务C
    • 组件B1
    • 组件B2
    • ...
  • ...

我想要以下输出（构建）：

• 静态/js
  • 服务A
    • serviceA.bundle.chunkhash.js
  • 服务B
    • serviceB.bundle.chunkhash.js
  • 服务C
    • serviceC.bundle.chunkhash.js

（其他运行时/主电源位于 /static/js 的根目录下）

另一个限制是组件是动态加载的

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

“componentPath”是动态确定的（当用户单击图标时，它会打开给定的服务）。

这样做的原因是我想将每个包包含到运行后端的单独 Docker 映像中。然后，由于应用程序路由，每个 Docker 映像都可以访问：

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service …