Angular CLI - 从优化中排除包

标签 angular reactjs angular-cli

在我们的 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/

相关文章:

Angular 未捕获类型错误 : e is not a constructor after build --prod (work on ng serve)

angular - 初始化 BeanStub 时无法找到 bean 引用 frameworkOverrides

javascript - 在 Angular 8 应用程序中使用外部 JavaScript 库

Javascript/React window.onerror 触发了两次

angular - UglifyJSPlugin 构建时出现内存不足错误

angular - 如何将 Yarn 配置为 Angular CLI 的默认包管理器?

javascript - Angular2 - 共享组件 Controller

angular - 我如何将一个类导出到模块并在带 Angular typescript 中将其导入另一个模块

javascript - 创建一个 React 高阶组件,作为子组件的 "loader"(动画)包装器

node.js - 从 Node.JS 服务器重定向到路由不会呈现下一页