预算中有警告，超出初始的最大限度

当用——prod构建我的Angular 7项目时，我在budgets中收到一个警告。

我有一个Angular 7项目。我试图建立它，但我一直得到以下警告:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

这些是数据块的细节:

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

预算到底是什么?我该如何管理他们?

362591 次浏览
小开
最佳答案

打开angular.json文件，找到budgets关键字。

它应该是这样的:

    "budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]

正如你可能已经猜到的，你可以增加maximumWarning值来防止这个警告，即:

    "budgets": [
{
"type": "initial",
"maximumWarning": "4mb", <===
"maximumError": "5mb"
}
]

预算是什么意思?

性能预算是对某些值的一组限制 影响站点性能的，即在设计中不可逾越 任何web项目的开发

在我们的例子中，预算是捆绑包大小的限制。

参见:

小开

什么是Angular CLI预算? 预算是Angular CLI中鲜为人知的特性之一。这是一个相当小但非常简洁的功能!< / p > 随着应用程序功能的增长，它们的大小也在增长。 预算是Angular CLI中的一个特性，它允许你在配置中设置预算阈值，以确保应用程序的某些部分处于你设置的 - 官方文档

的边界内 或者换句话说，我们可以将Angular应用描述为一组编译后的JavaScript文件，称为bundles，这些文件是由构建过程生成的。 Angular预算允许我们配置这些bundle的预期大小。更重要的是，当我们想要收到警告时，我们可以为条件配置阈值，甚至如果bundle大小太失控，我们就会生成错误而导致构建失败!< / p >

如何定义预算? Angular的预算在Angular。json文件。预算是每个项目定义的，这是有意义的，因为工作区中的每个应用程序都有不同的需求

从实际的角度考虑，为产品构建定义预算是有意义的。Prod构建在应用所有优化(如摇树和代码最小化)后创建具有“真实大小”的包。

哎呀，一个构建错误!超过了最大束大小。这是一个很好的信号，告诉我们有些事情出错了……

  1. 我们可能在我们的功能上做了实验，但没有正确地清理
  2. 我们的工具可能会出错并执行错误的自动导入，或者从建议的导入列表中选择错误的项
  3. 我们可能会在不合适的位置从惰性模块中导入东西
  4. 我们的新功能非常庞大，不符合现有的预算

第一种方法:你的文件压缩了吗?

一般来说，gzip文件的大小只有原始文件的20%左右，这可以大大减少应用程序的初始加载时间。 要检查你是否已经压缩了你的文件，只需打开开发人员控制台的网络选项卡。在“Response Headers”中，如果你应该看到“Content-Encoding: gzip”，你就可以开始了

如何gzip? 如果你把Angular应用托管在大多数云平台或CDN上，你不应该担心这个问题，因为他们可能已经为你解决了这个问题。但是，如果你有自己的服务器(比如NodeJS + expressJS)为你的Angular应用服务，一定要检查文件是否压缩了。 下面是一个在NodeJS + expressJS应用程序中gzip静态资产的例子。你很难想象这个非常简单的中间件“压缩”会将你的bundle大小从2.21MB减少到495.13KB 

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

第二种方法:分析你的Angular bundle

如果你的包确实太大了，你可能需要分析你的包，因为你可能使用了一个不合适的大尺寸第三方包，或者你忘记删除一些你不再使用的包。Webpack有一个惊人的特性，可以让我们直观地了解Webpack包的组成。

enter image description here

这张图非常简单。

  1. npm install -g webpack-bundle-analyzer
  2. 在你的Angular应用中，运行ng build --stats-json(不要使用--prod标志)。通过启用--stats-json，你将得到一个额外的stats.json文件
  3. 最后，运行webpack-bundle-analyzer ./dist/stats.json，浏览器将在localhost:8888弹出页面。祝你玩得开心。

ref 1: Angular CLI预算如何拯救我的一天，又如何拯救你的一天

ref 2: 4步优化Angular bundle大小

小开 
"budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ]

我用过这个，但它不工作。然后我这样做了:

"budgets": [ { "type": "initial", "maximumWarning": "20mb", "maximumError": "25mb" }, { "type": "anyComponentStyle", "maximumWarning": "20mb", "maximumError": "25mb" } ]
小开

在我的情况下，我不得不这样改变，接受的解决方案不工作。我在Angular中使用TensorFlow.js。

"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "5mb"<=== instead!
}
]
小开

请打开angular.json并检查budgets关键字，并增加/提高maximumWarning, maximumError，这应该可以解决问题

 "budgets": [
{
"type": "initial",
"maximumWarning": "8mb",
"maximumError": "8mb"
}
]

提交答案