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

Question

问题

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

警告

资产大小限制警告：以下资产超出 建议的大小限制 (250 kB)。这会影响 Web 性能。 资源：bundle.js (10.3 MB)

入口点大小限制中的警告：以下入口点组合 资产大小超过建议的限制 (250 kB)。这可能会影响网络 表现。入口点：应用程序 (10.3 MB) bundle.js

webpack 性能建议中的警告：您可以限制大小 通过使用 System.import() 或 require.ensure 来延迟捆绑包 加载应用程序的某些部分。欲了解更多信息，请访问 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 中使用 entry points 将它们分开。
  • 减小文件大小的示例：如果我们使用 Bootstrap：我们真的使用了所有 Bootstrap 吗？如果没有，请使用像 bootstrap-loader 这样的加载器，这将允许我们从引导程序中选择性地打开/关闭特性/文件/功能。
  • 当然，上述策略完全取决于您在应用程序中使用的库。我只是举了一些例子。