angular - 如何在 prod 模式下禁止 Angular 触摸（缩小）特定脚本

Question

我们正在构建一个Angular(v. 7) 应用程序，其中我们还使用了一些React基于 - 的小部件。这些React小部件捆绑在一个umd节点模块中。在开发模式下，一切都按预期工作 - 小部件被正确呈现。但是，在生产模式下会发生一些奇怪的事情，并且一些React小部件以一种奇怪的方式呈现。

经过一些试验后，我尝试将它们包含widgets在其中并将其从文件scripts中删除。然后我只需通过它的名称访问它。像这样构建显示正确的渲染（与模式相同）。因此，我为自己得出结论，由于角度的缩小过程，会发生不正确的渲染。如果脚本保持不变，一切正常。angular.jsonimporttswindow['libraryName']proddev

现在，这个解决方案（即使它有效）一点也不完美。首先，通过window对象访问库是相当丑陋的。更重要的是，该库在应用程序开始加载后立即加载，这是不可接受的，因为它的大小以及它仅在延迟加载模块中使用的事实。

我还尝试使用 TypeScript 动态import()并以这种方式获取库。但这不起作用，因为当 Angular 看到我以一种或另一种方式导入它时，它仍然会缩小该库。

我知道这是一个奇怪的问题，我没有找到与我正在经历的类似的事情。但从提到的所有事实来看——最好的解决方案是以某种方式强制 Angular 缩小过程忽略该库。

ps我可能错了，这完全是由于缩小所致。但这肯定是由于构建打包中涉及的某些步骤与构建（）prod中发生的不同。devng serve

这些是不同的angular.json构建设置和相应的结果：

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)

React 小部件库使用 webpack v.4 内置的缩小器自行缩小。

标签： angularreactjstypescriptangular-cli