调整导入以减小 Angular 应用的大小
介绍
Angular 是一个非常固执己见且强大的框架。因此，与使用其他 JavaScript 框架（如 React）编写的应用程序相比，Angular 应用程序的包大小通常更大。这是因为 Angular 本身就包含了很多有用的库。考虑到这一点，掌握生产包的大小对您来说非常重要。那么，您该如何做到这一点呢？
在本指南中，您将了解如何通过调整第三方库的导入来减小 Angular 应用程序的大小。
让我们开始吧！
分析捆绑包大小
调整导入和减少包大小的第一步是诊断最大的罪魁祸首。您可以使用有用的webpack-bundle-analyzer库来直观地了解哪些依赖项最需要调整。
要使用 NPM 安装webpack-bundle-analyzer，您可以在命令行上运行npm install -g webpack-bundle-analyzer 。
安装完成后，您现在可以导航到 Angular 项目目录并运行：
ng build——stats-json
此命令将构建一个配置文件，webpack-bundle-analyzer可以使用该文件为您提供所需的视觉效果。现在是时候看看包含 lodash 库的 Angular 应用的包是什么样子了。
目前，该应用程序导入的 lodash 函数如下：
import { first } from 'lodash';
您可以通过运行以下命令来分析您的 Angular 包：webpack-bundle-analyzer <path-to-stats.json>
这启动了一个包含您需要的分析的简单服务器。导航到localhost:8888后，您可以看到应用程序中不同库的大小。哇！这个简单的应用程序只使用了一个 lodash 函数，但包含了整个 lodash 库——全部 530 KB！您可以做得更好。在下一节中，您将学习如何调整导入以减小包的大小。
减少包大小
您已经学会了如何诊断导致打包体积过大的原因。现在您将学习如何缓解这一问题！这主要分为两个步骤。
首先，您必须确定要减少的依赖项是否使用 ES 模块。如果您使用的库（如 lodash）已将其 API 分解为可导入的 ES 模块，那么您可以充分利用打包器的摇树功能。幸运的是，lodash 提供了一个兼容 ES 模块的库 — lodash-es。
其次，您必须将命名导入的使用改为直接导入。例如，上面使用的导入 import { first } from 'lodash'应改为import first from 'lodash/first'。
现在，实现解决方案。要安装所需的必要库，您可以运行npm i --save lodash-es和npm i -D @types/lodash-es。此后，只需将命名导入更改为默认导入即可。
完成这些步骤后，您就可以重新分析您的包了。运行ng build --stats-json进行重建，然后再次启动webpack-bundle-analyzer 。
哇！您刚刚将530 KB 的库依赖项减少到597 字节的库依赖项。这是一个巨大的差异！想象一下，通过调整 Angular 应用中的所有导入，您可以做些什么！
结论
在本指南中，您学习了如何通过更改导入第三方依赖项的方式来减小 Angular 应用的大小。您首先学习了如何使用webpack-bundle-analyzer诊断包大小的原因。然后，我们向您展示了如何通过识别使用 ES 模块的库并将命名导入更改为默认导入来减小包大小。
现在您可以放心大幅减少生产 Angular 应用程序的大小！
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~