在我们的 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 中。
有人可以提出解决方案吗?或者任何猜测为什么会发生这种情况?
最佳答案
好吧,由于我们还没有设法找到更好的解决方案,我们决定保留所有build设置。相反,我们添加了 main.js
来自编译的脚本 React
图书馆到angular.json
build.scripts
大批。这样 Angular 构建系统会将这个库添加为 <script>
到 index.html
原样。这个基于 react 的库被编译为一个 UMD 模块。所以我们可以从全局范围(window.<libraryName>
)访问它。
然后我们删除了所有 React
的导入从我们的代码库。现在,Angular 构建过程完全忽略了该库,只是将未修改的源代码添加为单独的脚本。
现在一切正常。
关于Angular CLI - 从优化中排除包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52891528/