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 应用程序模块，如果有意义的话，可能将其捆绑在一个单独的 block 中。

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

Answer 1

好吧，由于我们还没有设法找到更好的解决方案，我们决定保留所有build设置。相反，我们添加了 main.js来自编译的脚本 React图书馆到angular.json build.scripts大批。这样 Angular 构建系统会将这个库添加为 <script>到 index.html原样。这个基于 react 的库被编译为一个 UMD 模块。所以我们可以从全局范围(window.<libraryName>)访问它。

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

现在一切正常。