如何使我的 Angular 应用程序轻量级

Question

我在我的应用程序中使用 angular 7。

当我在开发人员工具网络选项卡中使用 localhost:4200 启动应用程序时，太多的 CSS、scss、js ......正在加载。但我不需要加载所有这些。我只需要登录模块和相应的样式...这样我的应用程序就会运行得非常快。

这该怎么做？

截屏：

Answer 1

有很多方法可以提高 Angular 应用程序的整体性能。在您的特定情况下，您可以简单地ng serve --aot=true --prod并且应该加快开发客户端的性能，但是会使热刷新功能非常慢。不推荐开发。

但是，由于我花了大量时间在这上面，我想我可以列出我最喜欢的提高性能的方法：

#1. 懒加载模块

（以我的经验）大多数人选择 Angular 进行大型项目，因为它是自以为是且有组织的设计。然而，大型项目的性能往往会受到影响，特别是如果一切都像 Angular 应用程序一样集中在一个地方。但是，由于 Angular 的模块化设计，我们可以决定何时加载应用程序的块。

有关如何在您的应用程序中实现此功能的最清晰说明，我建议阅读文档https://angular.io/guide/lazy-loading-ngmodules但是，我将在此处给出一个简短示例：

1. 向您的项目添加路由（在新项目中只需使用ng new App并从 cli 添加路由）
2. 创建一个带路由的子模块 ng generate module mySubModule --routing
3. 更新app-routing.module.ts文件中的路由模块，使其看起来有点像这样

const routes: Routes = [
 {
   path: '',
   loadComponent: HomeComponent
 },
 {
   path: 'mysubroute',
   loadChildren: () => import('./mySubModule/mySubModule.module').then(mod => mod.MySubModuleModule)
 },
]

那么子模块中的所有内容都不会加载，除非您在 /mysubroute 上或在其他所有内容都已加载之后。容易吧？

#2. 服务器端渲染

*注意*懒加载功能模块的新方法并没有用角通用工作。您需要使用旧的字符串方法。您可以在此处找到一个示例（对于较新版本的 angular 不再需要）

服务器端渲染可以显着提高 Web 性能，尤其是在您的页面变化不大的情况下。但是，这是一个更高级的主题，需要对服务器、服务器缓存的工作方式有一定的了解，尤其是在您决定不使用 express 的情况下。

不过，将 angular 通用添加到您的项目中是相当容易的 ng add @nguniversal/express-engine --clientProject angular.io-example

#3. 使用功能模块时不要使用“共享模块”。

许多教程建议在开发时使用共享模块，因为它确实让您的生活变得更轻松。您不必担心模板中缺少导入和混淆错误。

然而，这确实需要付出一些代价。如果您将每个组件都导入到您的每个模块中，那么您每次都会预先加载这些组件。

一般来说，为了获得最佳性能，您只想在任何给定时间加载您需要的内容。我发现最好的方法是为每个组件制作一个模块，并在必要时导入它们。这可能会稍微降低运行时性能，它会加快初始加载时间。

#4. 老派的网络性能技巧仍然有效。

• 懒加载你的图片
• 优化巨幅图像
• 限制额外字体的数量
• 向您的服务器添加压缩
• 推迟未使用的 css

Angular 为我们做了很多，但是巨大的资源确实是糟糕加载时间的根源。除了我的移动数据公司，加载 3.4mb 的背景图像对任何人都没有任何好处。