logo标签列表

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

angularwebpack
14

问题

在我的Angular2 Node应用程序中，即使没有对应用程序进行任何更改，也会出现此警告：

警告

警告：资产大小超出推荐大小限制（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构建项目时出现开发环境的问题？

也许这对你有兴趣：https://github.com/preboot/angular2-webpack/issues/90 - Milananas
1个回答
22
performance : {
    hints : false
}

  • 如果你想要解决问题：以上链接中有更详细的说明。简单来说：

    • 使用模块的懒加载（这可以确保我们仅在用户访问该页面时加载某些部分）
    • 列出哪些文件大小较大并找到一种策略来拆分它们或减小其大小。
    • 拆分文件的策略示例：如果我们正在使用 jQuery、Bootstrap 和 Fontawesome，那么与其将它们全部打包成一个大文件，不如使用 webpack 中的 entry points 将它们分开。
    • 减小文件大小的示例：如果我们正在使用 Bootstrap：我们真的在使用 Bootstrap 的所有功能吗？如果没有，可以使用像 bootstrap-loader 这样的加载器，它允许我们从 bootstrap 中有选择地启用/禁用功能和文件。
    • 当然，以上策略纯粹取决于您在应用程序中使用的库。这里只是举了一些例子。
    • 1
    对于使用Webpack 5的读者：如果要拆分库，请查看SplitChunksPlugin。 - VimNing
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接