Angular CLI - 从优化中排除包

Question

在我们的 Angular 6 应用程序中，我们使用预构建的 React 应用程序来渲染一些内部组件。React 应用程序的编译版本作为节点模块安装。

当我在开发模式下运行代码时ng serve，一切都按预期完美运行。

但是，当我在 中构建应用程序时--prod，React 组件的行为开始有所不同。出现一些奇怪的渲染问题。

我正在试验 angular-cli 设置，并意识到如果我禁用optimization("optimization": false)，问题就消失了。但是包的大小变大了 2 倍。

这些是我尝试过的设置。以及相应的结果：

optimization: false, buildOptimizer: true, vendorChunk: false - 33.3mb (works good)
optimization: true, buildOptimizer: false, vendorChunk: false - 17mb (not working)
optimization: true, buildOptimizer: false, vendorChunk: true - 17mb (not working)

当 Angular 尝试优化 React 模块时，似乎出现了问题。

我认为最好为除 React 应用程序模块之外的所有项目启用优化。以某种方式从优化管道中排除 React 应用程序模块，如果有意义的话，可能会将其捆绑在一个单独的块中。

有人可以提出解决方案吗？或者任何猜测为什么会发生这种情况？

Answer 1

好吧，由于我们还没有找到更好的解决方案，因此我们决定保留所有构建设置不变。相反，我们将main.js编译React库中的脚本添加到数组中angular.json build.scripts。这样，Angular 构建系统将按原样添加此<script>库index.html。这个基于 React 的库被编译为 UMD 模块。所以我们可以从全局范围（window.<libraryName>）访问它。

React然后我们从代码中删除了库的所有导入。现在，Angular 构建过程完全忽略该库，只是将未修改的源代码添加为单独的脚本。

现在一切都很完美。