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

Question

问题

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

警告

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

输入点大小限制中的警告:以下入口点组合资产大小超过建议限制(250 kB).这可能会影响Web性能.入口点:app(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,那么不要将所有这些文件打包成一个单独的大文件,将它们分别entry points用于webpack.
  • 减少文件大小的示例:如果我们使用Bootstrap:我们真的使用了Bootstrap的全部内容吗？如果没有,使用一些加载器bootstrap-loader,这将允许我们从bootstrap有选择地开/关功能/文件/功能.
  • 当然,上述策略完全取决于您在应用程序中使用的库.我刚才举了一些例子.