什么是Angular CLI预算?
预算是Angular CLI鲜为人知的功能之一。这是一个很小但非常整洁的功能!
随着应用程序功能的增长,它们的大小也随之增长。预算是Angular CLI中的一项功能,可让您在配置中设置预算阈值,以确保您的应用程序的一部分保持在您设置的边界内 — 官方文档
换句话说,我们可以将Angular应用程序描述为由编译过程生成的一组称为bundles的已编译JavaScript文件。角度预算允许我们配置这些捆绑包的预期大小。更重要的是,我们可以为希望收到警告,甚至如果捆绑包的大小变得无法控制的错误而导致构建失败的条件配置阈值!
如何定义预算?
Angular预算是在angular.json文件中定义的。为每个项目定义预算很有意义,因为工作区中的每个应用程序都有不同的需求。
务实地思考,只有为生产构建定义预算才有意义。产品构建在应用了诸如摇树和代码最小化之类的所有优化之后,将创建具有“真实大小”的捆绑包。
糟糕,构建错误!超过最大捆束尺寸。这是一个很好的信号,告诉我们出了点问题…
- 我们可能已经尝试过我们的功能,但未正确清理
- 我们的工具可能会出错并执行错误的自动导入,或者我们从建议的导入列表中选择了不良项目
- 我们可能会在不适当的位置从惰性模块导入内容
- 我们的新功能非常强大,不适合现有预算
第一种方法:将文件压缩吗?
一般来说,压缩文件的大小仅为原始文件的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捆绑包的组成。
这张图非常容易。
npm install -g webpack-bundle-analyzer
- 在您的Angular应用中,运行
ng build --stats-json
(不要使用flag --prod
)。通过启用,--stats-json
您将获得一个附加文件stats.json
- 最后,运行
webpack-bundle-analyzer ./dist/stats.json
,您的浏览器将在localhost:8888弹出页面。玩得开心。
ref 1:Angular CLI预算如何节省我的一天,以及如何节省你的一天
参考2:分4步优化Angular束的大小