Thierry  Perret

Thierry Perret

1657263900

Composants Autonomes De Chargement Paresseux Avec "loadComponent"

La version 14.x d'Angular introduit ce concept fantastique de "composants autonomes" et modifie la façon dont nous pouvons optimiser les performances via le chargement paresseux.

Les composants autonomes n'ont plus de @NgModule, alors comment pouvons-nous les charger paresseux via le routeur ?

L'utilisation d'un NgModulefacilite la répartition du code au niveau du routeur, mais avec l'introduction de composants autonomes, les choses ont très légèrement changé (pour le mieux).

Avec NgModule, nous aurions quelque chose comme ça qui chargerait paresseusement le MenuModule, ce qui est bien :

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.module').then((x) => x.MenuModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)]
})
export class AppModule {}

Nous aurions alors quelque chose comme ceci à l'intérieur des MenuModuleroutes :

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(MenuRoutes)]
})
export class MenuModule {}

Aucun fractionnement de code ni chargement paresseux ne se produit à ce stade, uniquement au MenuModuleniveau.

Cela signifie que même si nous ne naviguons jamais vers le MenuSingleComponent, il est toujours chargé dans le bundle.

Imaginez maintenant qu'à plus grande échelle, cela représente beaucoup de code inutilisé qui est plus lent à charger sur le réseau.

👑 Il existe un modèle de « module angulaire à composant unique » qui a été lancé pour nous permettre de charger paresseux des composants individuels, car actuellement notre système est MenuModulelivré à la fois avec MenuListComponentet MenuSingleComponent.

Alors, que peuvent faire les composants autonomes, comment nous aident-ils ?

Tout d'abord, refactorisons notre MenuRoutesà ceci:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

// ❌ Commented out, where we're going we don't need modules 🚀👨‍🚀
// @NgModule({
//   imports: [RouterModule.forChild(MenuRoutes)]
// })
// export class MenuModule {}

Non NgModule.

Avec la propriété du routeur loadChildren, on peut désormais passer directement dans les routes sans utiliser RouterModule.forChild:

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.routes').then((x) => x.MenuRoutes),
  }
];

💥 J'ai renommé le ./menu/menu.modulefichier en ./menu/menu.routes, car ce n'est plus un module et contient simplement une constante de route exportée.

Donc, à ce stade, les choses sont pour la plupart les mêmes, alors comment pouvons-nous diviser davantage le code et charger paresseusement les composants autonomes ?

À l'heure actuelle, nous utilisons la componentpropriété sur les itinéraires, et si nous introduisions une nouvelle propriété ?…

Dites bonjour à la nouvelle loadComponentpropriété, qui utilise une instruction dynamique importcomme le NgModulevoudrait, mais pour un composant autonome :

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    loadComponent: () =>
      import('./menu-list/menu-list.component').then((x) => x.MenuListComponent),
  },
  {
    path: 'menu/:id',
    loadComponent: () =>
      import('./menu-single/menu-single.component').then((x) => x.MenuSingleComponent),
  }
];

Ce qui est également génial avec cette approche, c'est qu'elle utilise le système de type pour trouver les références x.MenuListComponentet x.MenuSingleComponent.

Cela signifie que nous n'avons plus besoin d'être statiques import { MenuListComponent } from '...'et import { MenuSingleComponent } from '...'au sommet de nos itinéraires. Encore plus propre.

Nous nous retrouvons maintenant avec plus de fractionnement automatique du code en faisant cela aussi.

Auparavant, nous avions juste MenuModuledivisé tout le code et chargé paresseux.

Maintenant, nous avons trois bundles différents qui sont chargés paresseusement - le MenuRoutessera dans son propre petit bundle verrrrry (littéralement juste le tableau de routes et les instructions d'importation), suivi des bundles MenuListComponentet MenuSingleComponentqui contiennent la logique supplémentaire.

Un gagnant-gagnant pour les performances et le code propre.

Et c'est tout! Les composants autonomes sont super et offrent de nouveaux modèles sympas avec Angular.

De plus, ils peuvent être combinés avec ceux qui existent NgModulesdans vos applications pour vous aider à réaliser tout ce que vous voulez.

Merci d'avoir lu, bon chargement paresseux !

Source : https://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular 

What is GEEK

Buddha Community

Composants Autonomes De Chargement Paresseux Avec "loadComponent"
Thierry  Perret

Thierry Perret

1657263900

Composants Autonomes De Chargement Paresseux Avec "loadComponent"

La version 14.x d'Angular introduit ce concept fantastique de "composants autonomes" et modifie la façon dont nous pouvons optimiser les performances via le chargement paresseux.

Les composants autonomes n'ont plus de @NgModule, alors comment pouvons-nous les charger paresseux via le routeur ?

L'utilisation d'un NgModulefacilite la répartition du code au niveau du routeur, mais avec l'introduction de composants autonomes, les choses ont très légèrement changé (pour le mieux).

Avec NgModule, nous aurions quelque chose comme ça qui chargerait paresseusement le MenuModule, ce qui est bien :

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.module').then((x) => x.MenuModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)]
})
export class AppModule {}

Nous aurions alors quelque chose comme ceci à l'intérieur des MenuModuleroutes :

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(MenuRoutes)]
})
export class MenuModule {}

Aucun fractionnement de code ni chargement paresseux ne se produit à ce stade, uniquement au MenuModuleniveau.

Cela signifie que même si nous ne naviguons jamais vers le MenuSingleComponent, il est toujours chargé dans le bundle.

Imaginez maintenant qu'à plus grande échelle, cela représente beaucoup de code inutilisé qui est plus lent à charger sur le réseau.

👑 Il existe un modèle de « module angulaire à composant unique » qui a été lancé pour nous permettre de charger paresseux des composants individuels, car actuellement notre système est MenuModulelivré à la fois avec MenuListComponentet MenuSingleComponent.

Alors, que peuvent faire les composants autonomes, comment nous aident-ils ?

Tout d'abord, refactorisons notre MenuRoutesà ceci:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

// ❌ Commented out, where we're going we don't need modules 🚀👨‍🚀
// @NgModule({
//   imports: [RouterModule.forChild(MenuRoutes)]
// })
// export class MenuModule {}

Non NgModule.

Avec la propriété du routeur loadChildren, on peut désormais passer directement dans les routes sans utiliser RouterModule.forChild:

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.routes').then((x) => x.MenuRoutes),
  }
];

💥 J'ai renommé le ./menu/menu.modulefichier en ./menu/menu.routes, car ce n'est plus un module et contient simplement une constante de route exportée.

Donc, à ce stade, les choses sont pour la plupart les mêmes, alors comment pouvons-nous diviser davantage le code et charger paresseusement les composants autonomes ?

À l'heure actuelle, nous utilisons la componentpropriété sur les itinéraires, et si nous introduisions une nouvelle propriété ?…

Dites bonjour à la nouvelle loadComponentpropriété, qui utilise une instruction dynamique importcomme le NgModulevoudrait, mais pour un composant autonome :

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    loadComponent: () =>
      import('./menu-list/menu-list.component').then((x) => x.MenuListComponent),
  },
  {
    path: 'menu/:id',
    loadComponent: () =>
      import('./menu-single/menu-single.component').then((x) => x.MenuSingleComponent),
  }
];

Ce qui est également génial avec cette approche, c'est qu'elle utilise le système de type pour trouver les références x.MenuListComponentet x.MenuSingleComponent.

Cela signifie que nous n'avons plus besoin d'être statiques import { MenuListComponent } from '...'et import { MenuSingleComponent } from '...'au sommet de nos itinéraires. Encore plus propre.

Nous nous retrouvons maintenant avec plus de fractionnement automatique du code en faisant cela aussi.

Auparavant, nous avions juste MenuModuledivisé tout le code et chargé paresseux.

Maintenant, nous avons trois bundles différents qui sont chargés paresseusement - le MenuRoutessera dans son propre petit bundle verrrrry (littéralement juste le tableau de routes et les instructions d'importation), suivi des bundles MenuListComponentet MenuSingleComponentqui contiennent la logique supplémentaire.

Un gagnant-gagnant pour les performances et le code propre.

Et c'est tout! Les composants autonomes sont super et offrent de nouveaux modèles sympas avec Angular.

De plus, ils peuvent être combinés avec ceux qui existent NgModulesdans vos applications pour vous aider à réaliser tout ce que vous voulez.

Merci d'avoir lu, bon chargement paresseux !

Source : https://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular 

Diego  Elizondo

Diego Elizondo

1657263720

Componentes Independientes De Carga Diferida Con "loadComponent"

La versión 14.x de Angular presenta este fantástico concepto de "componentes independientes" y cambia la forma en que podemos optimizar el rendimiento a través de la carga diferida.

Los componentes independientes ya no tienen un @NgModule, entonces, ¿cómo los cargamos de forma diferida a través del enrutador?

El uso de an NgModulefacilita la división del código en el nivel del enrutador, pero con la introducción de componentes independientes, las cosas han cambiado ligeramente (para mejor).

Con NgModule, tendríamos algo como esto que cargaría de forma diferida el MenuModule, lo cual está bien:

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.module').then((x) => x.MenuModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)]
})
export class AppModule {}

Entonces tendríamos algo como esto dentro de las MenuModulerutas:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(MenuRoutes)]
})
export class MenuModule {}

No hay división de código ni carga diferida en este punto, solo en el MenuModulenivel.

Eso significa que incluso si nunca navegamos al MenuSingleComponent, todavía se carga en el paquete.

Ahora imagine que, a mayor escala, hay mucho código sin usar que se carga más lentamente en la red.

👑 Hay un patrón de "Módulo angular de un solo componente" que fue pionero para permitirnos cargar componentes individuales de forma diferida, porque actualmente nuestros MenuModuleenvíos tienen ambos MenuListComponenty MenuSingleComponent.

Entonces, ¿qué pueden hacer los componentes independientes? ¿Cómo nos ayudan?

Primero, refactoricemos nuestro MenuRoutesa esto:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

// ❌ Commented out, where we're going we don't need modules 🚀👨‍🚀
// @NgModule({
//   imports: [RouterModule.forChild(MenuRoutes)]
// })
// export class MenuModule {}

no NgModule_

Con la propiedad del enrutador loadChildren, ahora podemos pasar las rutas directamente sin usar RouterModule.forChild:

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.routes').then((x) => x.MenuRoutes),
  }
];

💥 Cambié el nombre del ./menu/menu.modulearchivo a ./menu/menu.routes, ya que ya no es un módulo y simplemente contiene una constante de ruta exportada.

Entonces, en este punto, las cosas son prácticamente iguales, entonces, ¿cómo podemos dividir aún más el código y cargar de forma diferida los componentes independientes?

Actualmente, estamos usando la componentpropiedad en las rutas, ¿y si introducimos una nueva propiedad?…

Saluda a la nueva loadComponentpropiedad, que usa una declaración dinámica importcomo NgModulelo haría, pero para un componente independiente:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    loadComponent: () =>
      import('./menu-list/menu-list.component').then((x) => x.MenuListComponent),
  },
  {
    path: 'menu/:id',
    loadComponent: () =>
      import('./menu-single/menu-single.component').then((x) => x.MenuSingleComponent),
  }
];

Lo que también es bueno de este enfoque es que usa el sistema de tipos para encontrar las x.MenuListComponentreferencias x.MenuSingleComponent.

Eso significa que ya no necesitamos estar estáticos import { MenuListComponent } from '...'y import { MenuSingleComponent } from '...'en la parte superior de nuestras rutas. Incluso más limpio.

Ahora terminamos con una división de código más automática al hacer esto también.

De antemano, solo teníamos el MenuModulecódigo completo dividido y cargado de forma diferida.

Ahora, tenemos tres paquetes diferentes que se cargan de forma diferida: MenuRoutesestarán en su propio paquete muy pequeño (literalmente, solo la matriz de rutas y las declaraciones de importación), seguidos por los paquetes MenuListComponenty que contienen la lógica adicional.MenuSingleComponent

Un ganar-ganar para el rendimiento y el código limpio.

¡Y eso es! Los componentes independientes son excelentes y ofrecen algunos patrones nuevos y agradables con Angular.

Además, se pueden combinar con las existentes NgModulesen sus aplicaciones para ayudarlo a lograr lo que quiera.

Gracias por leer, ¡feliz carga diferida!

Fuente: https://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular 

Angularの「loadComponent」を使用した遅延ロードスタンドアロンコンポーネント

Angularのバージョン14.xは、「スタンドアロンコンポーネント」のこの素晴らしい概念を導入し、遅延読み込みを介してパフォーマンスを最適化する方法を変更します。

スタンドアロンコンポーネントにはもはやがない@NgModuleので、ルーターを介してそれらを遅延ロードするにはどうすればよいですか?

を使用するNgModuleと、ルーターレベルでのコード分割が簡単になりますが、スタンドアロンコンポーネントの導入により、状況はこれまでになくわずかに変化しました(より良い方向に)。

を使用NgModuleすると、を遅延ロードする次のようなものになりますMenuModule。これは問題ありません。

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.module').then((x) => x.MenuModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)]
})
export class AppModule {}

MenuModuleその場合、ルート内に次のようなものがあります。

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(MenuRoutes)]
})
export class MenuModule {}

この時点では、コード分割や遅延読み込みは発生しておらず、MenuModuleレベルでのみ発生しています。

つまり、に移動しなくてもMenuSingleComponent、バンドルにロードされます。

ここで、大規模な場合、ネットワーク全体での読み込みが遅い未使用のコードがたくさんあると想像してみてください。

👑現在、MenuModuleとの両方が付属しているため、個々のコンポーネントを遅延ロードできるようにするために開発された「単一コンポーネント角度モジュール」パターンがMenuListComponentありMenuSingleComponentます。

では、スタンドアロンコンポーネントは何ができるのでしょうか、どのように役立つのでしょうか。

まず、これにリファクタリングしましょうMenuRoutes

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

// ❌ Commented out, where we're going we don't need modules 🚀👨‍🚀
// @NgModule({
//   imports: [RouterModule.forChild(MenuRoutes)]
// })
// export class MenuModule {}

いいえNgModule

ルーターのloadChildrenプロパティを使用すると、次を使用せずにルートを直接渡すことができますRouterModule.forChild

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.routes').then((x) => x.MenuRoutes),
  }
];

💥./menu/menu.moduleファイルの名前をに変更しました。これ./menu/menu.routesは、モジュールではなく、エクスポートされたルート定数のみを保持しているためです。

したがって、この時点ではほとんど同じです。スタンドアロンコンポーネントをさらにコード分割して遅延ロードするにはどうすればよいでしょうか。

現在、componentルート上で物件を利用していますが、新しい物件を導入したらどうなるでしょうか…

新しいプロパティに挨拶します。これは、スタンドアロンコンポーネントの場合と同様にloadComponent、動的importステートメントを使用します。NgModule

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    loadComponent: () =>
      import('./menu-list/menu-list.component').then((x) => x.MenuListComponent),
  },
  {
    path: 'menu/:id',
    loadComponent: () =>
      import('./menu-single/menu-single.component').then((x) => x.MenuSingleComponent),
  }
];

このアプローチの優れている点は、型システムを使用してx.MenuListComponentx.MenuSingleComponent参照を検索することです。

つまり、静的import { MenuListComponent } from '...'import { MenuSingleComponent } from '...'ルートの最上位にいる必要がなくなります。さらにきれい。

これを行うことで、より多くの自動コード分割が行われるようになりました。

事前に、MenuModuleコード全体を分割して遅延読み込みしました。

これで、遅延ロードされる3つの異なるバンドルMenuRoutesができました。これは、独自の非常に小さなバンドル(文字通り、routes配列とimportステートメントのみ)に含まれ、その後に、さらにロジックを保持するバンドルが続きMenuListComponentますMenuSingleComponent

パフォーマンスとクリーンなコードの双方にメリットがあります。

以上です!スタンドアロンコンポーネントは非常に優れており、Angularでいくつかの素晴らしい新しいパターンを提供します。

さらに、それらをNgModulesアプリケーションに存在するものと組み合わせて、好きなことを達成するのに役立てることができます。

読んでくれてありがとう、幸せな遅延読み込み!

ソース:https ://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular 

郝 玉华

郝 玉华

1657260300

在 Angular 中使用“loadComponent”延迟加载独立组件

Angular 14.x 版本引入了“独立组件”这个奇妙的概念,并改变了我们通过延迟加载优化性能的方式。

独立组件不再有@NgModule,那么我们如何通过路由器延迟加载它们?

使用 anNgModule可以很容易地在路由器级别进行代码拆分,但是随着独立组件的引入,事情发生了如此轻微的变化(更好)。

有了NgModule,我们就会有这样的东西来延迟加载MenuModule,这很好:

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.module').then((x) => x.MenuModule),
  }
];

@NgModule({
  imports: [RouterModule.forRoot(AppRoutes)]
})
export class AppModule {}

然后,我们将在MenuModule路线内有这样的东西:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(MenuRoutes)]
})
export class MenuModule {}

此时没有发生代码拆分和延迟加载,仅在MenuModule级别发生。

这意味着即使我们从未导航到MenuSingleComponent,它仍然会被加载到包中。

现在想象一下,在更大的范围内,有很多未使用的代码在网络上加载速度较慢。

👑 有一种“单组件 Angular 模块”模式被率先允许我们延迟加载单个组件,因为目前我们MenuModule同时提供MenuListComponentMenuSingleComponent.

那么独立组件可以做什么,它们如何帮助我们呢?

首先,让我们重构MenuRoutes一下:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    component: MenuListComponent
  },
  {
    path: 'menu/:id',
    component: MenuSingleComponent
  }
];

// ❌ Commented out, where we're going we don't need modules 🚀👨‍🚀
// @NgModule({
//   imports: [RouterModule.forChild(MenuRoutes)]
// })
// export class MenuModule {}

没有NgModule

使用路由器的loadChildren属性,我们现在可以直接传入路由而不使用RouterModule.forChild

export const AppRoutes: Routes = [
  {
    path: 'menu',
    loadChildren: () =>
      import('./menu/menu.routes').then((x) => x.MenuRoutes),
  }
];

💥 我已将./menu/menu.module文件重命名为./menu/menu.routes,因为它不再是一个模块,而只是保存了一个导出的路由常量。

所以在这一点上,事情基本上是一样的,那么我们如何进一步代码拆分和延迟加载独立组件呢?

目前,我们在component路由上使用该属性,如果我们引入一个新属性呢?...

向新属性打个招呼loadComponent,它使用import类似于 will 的动态语句NgModule,但对于独立组件:

export const MenuRoutes: Routes = [
  {
    path: 'menu',
    loadComponent: () =>
      import('./menu-list/menu-list.component').then((x) => x.MenuListComponent),
  },
  {
    path: 'menu/:id',
    loadComponent: () =>
      import('./menu-single/menu-single.component').then((x) => x.MenuSingleComponent),
  }
];

这种方法的另一个优点是它使用类型系统来查找x.MenuListComponentx.MenuSingleComponent引用。

这意味着我们不再需要静态import { MenuListComponent } from '...'import { MenuSingleComponent } from '...'在我们的路线的顶部。甚至更干净。

我们现在也可以通过这样做来实现更自动的代码拆分。

之前,我们只是将整个MenuModule代码拆分并延迟加载。

现在,我们有三个不同的延迟加载的包——它们MenuRoutes将在它自己的 verrrry 小包中(实际上只是路由数组和导入语句),然后是包含进一步逻辑的MenuListComponent和包。MenuSingleComponent

性能和简洁代码的双赢。

就是这样!独立组件非常棒,并且提供了一些不错的 Angular 新模式。

更重要的是,它们可以与NgModules您的应用程序中现有的相结合,以帮助您实现您喜欢的任何事情。

感谢阅读,快乐懒加载!

来源:https ://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular 

Lazy Load Standalone Components with "loadComponent" in Angular

Version 14.x of Angular introduces this fantastic concept of “standalone components” and changes the way we can optimize for performance via lazy-loading.

Standalone components no longer have an @NgModule, so how do we lazy load them via the router?

Using an NgModule makes it easy to code split on the router level, but with the introduction of standalone components things have changed ever so slightly (for the better).

See more at: https://ultimatecourses.com/blog/lazy-load-standalone-components-via-load-component

#angular