angular - Webpack 警告入口点大小限制 bundle.js

Question

问题

在我的 Angular2 节点应用程序中出现此警告而没有对我的应用程序进行任何更改，

警告

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB). This can impact web performance. Assets: bundle.js (10.3 MB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance. Entrypoints: app (10.3 MB) bundle.js

WARNING in webpack performance recommendations: You can limit the size of your bundles by using System.import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/

背景

我很关心问题是什么。在需要解决方案之前了解它以及如何修复它。我的想法是我的设计模式有缺陷。

问题

1. 通过改变设计模式或架构是否可以避免这个问题？

2. 如果是的话怎么办？

3.抛出此错误时究竟是什么导致应用程序过大？

4.此警告会影响生产中的应用程序，还是仅在使用 Webpack 构建项目时影响开发中的应用程序？

Answer 1

• 有关此的更多信息，请访问:https://github.com/webpack/webpack/issues/3216

• 如果您想禁用此警告:

  performance : {
      hints : false
  }        
  

• 如果您想解决问题:上面的链接中提供了更详细的信息。简单地说:

  • 使用模块的延迟加载(这确保我们仅在用户访问该页面时加载某些部分)
  • 列出哪些文件的大小更大，并找到拆分它们或减小其大小的策略。
  • 文件拆分策略示例:如果我们使用 jQuery、Bootstrap 和 Fontawesome，那么不要将所有这些打包到一个大文件中，而是使用 webpack 中的入口点将它们分开。
  • 减小文件大小的示例:如果我们使用 Bootstrap:我们真的使用了所有 Bootstrap 吗？如果没有，请使用一些加载程序，例如 bootstrap-loader，这将允许我们从 Bootstrap 中有选择地打开/关闭特性/文件/功能。
  • 当然，上述策略完全取决于您在应用程序中使用的库是什么。我只是举了一些例子。