我有一个在 Angular 7 中开发的 crm。在第一次进入(登录)时,渲染登录屏幕需要将近 2 分钟。一旦这 2 分钟过去了,无论我注销和重新登录多少次,它都运行得非常好,非常顺利。我怀疑软件包和组件已安装并且未使用,这使得应用程序在首次加载时很重(它没有缓存任何内容)。现在......谷歌搜索我发现该命令存在:
npx depcheck
分析未使用的包和其他包。缺点是在我看来,未使用的列表以及其他@angular/common,以及我正在使用的包或库......当然,其中我使用了位置。我使用的另一个是@angular/material,因为我使用的是表格。我向您展示了它告诉我我不使用的内容以及我使用它的部分代码的图像:
角度材料表也发生了同样的事情,我认为@angular/material 未使用但我使用它。所以问题是……我怎么知道哪些组件或包没有被使用并删除它们以查看crm的第一次负载是否减轻。提前致谢。
我将尝试回答您的问题,但我无意详细说明,因为答案太长了。
启动 Angular 应用程序缓慢:
如果您的应用程序非常大(大量组件、大量逻辑),它很容易占用数十 MB。浏览器必须下载所有的 JS 文件,编译并运行它们。它相当于下载一个桌面应用程序,每次访问页面时安装并运行它,除非它已经被浏览器缓存。
您可以通过查看文件夹中生成的 js 文件的大小来检查这一点,这些文件
./dist
的名称类似于main-es2015.985f77de56cc1647a734.js
.Angular 提出的一个解决方案是使用按需加载的模块(延迟加载)。这使您可以将应用程序拆分为几个模块,这些模块仅在将要使用时才加载,从而减轻了初始负载。
清理未使用的代码
npx depcheck
我不认为该命令的功能能够检测 Typescript 使用的模块,它所做的是查看您的 Javascript 代码。这就是为什么它没有检测到您正在使用任何模块。但是您不必为此担心太多:Angular 编译器会通过摇树处理删除应用程序不使用的所有代码(字面意思是摇树以使叶子变干(没用,只会增加重量,落下)。