菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
457
0

解决关于 npm build --prod ,出现 ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 750 kB的问题

原创
05/13 14:22
阅读数 64685

问题:

执行命令 :npm build --pord,出现以下错误:

WARNING in Invalid background value at 11:14. Ignoring.

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

ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 750 kB.

解决方案:

打开angular.json文件,找到budgets看到这段

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

看得出来得修改maximumWarning值来防止出现此警告,和错误。

修改后:

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

出现这个问题得原因是,编译得时候运行内存超过预算了。

什么是Angular CLI预算?预算是Angular CLI鲜为人知的功能之一。这是一个很小但很整洁的功能!

随着应用程序功能的增长,它们的大小也随之增长。预算是Angular CLI中的一项功能,可让您在配置中设置预算阈值,以确保您的应用程序的一部分保持在您设置的边界内 — 官方文档

换句话说,我们可以将Angular应用程序描述为一组称为JavaScript的已编译JavaScript文件,这些文件是由构建过程生成的。角度预算允许我们配置这些捆绑包的预期大小。更重要的是,如果捆绑包的大小过于失控,我们可以为要接收警告甚至无法构建的错误配置条件阈值!

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

务实地思考,只有为生产构建定义预算才有意义。产品构建在应用了诸如摇树和代码最小化之类的所有优化之后,将创建具有“真实大小”的捆绑包。

糟糕,构建错误!超过最大捆束尺寸。这是一个很好的信号,告诉我们出了点问题…

  1. 我们可能已经尝试过我们的功能,但未正确清理
  2. 我们的工具可能会出错并执行错误的自动导入,或者我们从建议的导入列表中选择了不良项目
  3. 我们可能会在不适当的位置从惰性模块导入内容
  4. 我们的新功能非常强大,不适合现有预算

第一种方法:将文件压缩吗?

一般来说,压缩文件的大小仅为原始文件的20%,这可以大大减少应用程序的初始加载时间。要检查是否已压缩文件,只需打开开发者控制台的“网络”标签。在“响应标头”中,如果您应该看到“ Content-Encoding:gzip”,则可以使用。

如何gzip的? 如果您在大多数云平台或CDN中托管Angular应用,则不必担心此问题,因为它们可能已经为您解决了此问题。但是,如果您有自己的服务器(例如NodeJS + expressJS)为Angular应用程序提供服务,则一定要检查文件是否已压缩。以下是在NodeJS + expressJS应用中gzip静态资产的示例。您几乎无法想象,这种简单的中间件“压缩”功能会将捆绑包的大小从2.21MB减少到495.13KB。

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

第二种方法::分析您的Angular捆绑包

如果捆绑包的大小确实太大,则可能要分析捆绑包,因为您可能使用了不合适的大型第三方包装,或者如果您不再使用它,则忘记删除某些包装。Webpack具有惊人的功能,可让我们直观地了解Webpack捆绑包的组成。

 

了解更多相关:

https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a

https://blog.angularindepth.com/optimize-angular-bundle-size-in-4-steps-4a3b3737bf45?gi=d46cfade9db9

 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

发表评论

0/200
457 点赞
0 评论
收藏