{"id":32782,"date":"2021-05-04T18:00:00","date_gmt":"2021-05-04T16:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=32782"},"modified":"2021-05-06T09:39:22","modified_gmt":"2021-05-06T07:39:22","slug":"usiamo-il-lazy-loading-pattern-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/","title":{"rendered":"Usiamo il Lazy Loading pattern in Angular"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" data-attachment-id=\"32760\" data-permalink=\"https:\/\/blexin.com\/it\/?attachment_id=32760\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&amp;ssl=1\" data-orig-size=\"1105,656\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ITA_9_1105x656_blog lazy\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1024%2C608&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?resize=1024%2C608&#038;ssl=1\" alt=\"angular lazy loading\" class=\"wp-image-32760\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-1024x608.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-980x582.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy-480x285.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Uno dei concetti fondamentali di Angular sono i <strong>Moduli <\/strong>chiamati <strong>NgModules<\/strong>.Possiamo definire un NgModules come un contenitore di blocchi di codice che appartengono ad uno stesso flusso, ad una stessa funzionalit\u00e0 oppure dedicati ad un certo dominio dell\u2019applicazione, all\u2019interno dei quali possiamo trovare componenti, servizi e altri file di codice il cui scopo \u00e8 definito dal modulo stesso.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ogni applicazione Angular \u00e8 composta da almeno un modulo, il modulo root, che per convenzione \u00e8 chiamato <strong>AppModule <\/strong>ed \u00e8 definito nel file <strong><em>app.module.ts.<\/em><\/strong> Di seguito un esempio di come \u00e8 strutturato:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimport { NgModule } from &#039;@angular\/core&#039;; \nimport { BrowserModule } from &#039;@angular\/platform-browser&#039;; \n@NgModule({ \n        imports:     &#x5B; BrowserModule ], \n        providers:    &#x5B; Logger ], \n        declarations: &#x5B; AppComponent ], \n        exports:      &#x5B;], \n        bootstrap:    &#x5B; AppComponent ] \n}) \nexport class AppModule { } \n\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Nelle applicazioni pi\u00f9 complesse, oltre all<em>\u2019AppModule<\/em>, possono essere definiti molti altri moduli, aggiungendoli nell\u2019array <strong>imports<\/strong>. Di default, i moduli dichiarati nell\u2019<em>array imports<\/em> vengono caricati quando l\u2019applicazione parte, anche se non vengono immediatamente utilizzati.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Questo, ovviamente, ha un costo in termini di tempo, soprattutto se si tratta di un\u2019applicazione che possiede molte rotte che appartengono a moduli diversi tra loro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In questi casi, \u00e8 bene applicare il <strong>Lazy Loading <\/strong>design pattern, che ci consente di caricare i moduli solo nel momento in cui effettivamente ne abbiamo bisogno, ottenendo cos\u00ec un bundle iniziale pi\u00f9 piccolo e una diminuzione del tempo necessario al caricamento dell\u2019applicazione.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L&#8217;utilizzo di questo pattern nella nostra applicazione richiede pochi passaggi. Innanzitutto, occorre che la nostra applicazione abbia una gestione del <em>routing<\/em>, mediante quindi l\u2019importazione nell<em>\u2019AppModule<\/em> del <em>NgModule<\/em> <strong>RouterModule<\/strong> e l\u2019utilizzo della seguente istruzione all\u2019interno dell\u2019<em>array imports<\/em>:&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forRoot(&#x5B;  \n                {path: &#039;first&#039;, component: FirstComponent},  \n                {path: &#039;second&#039;, component: SecondComponent},  \n                ]), \n... \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In questo modo, possiamo vedere una specifica <em>view<\/em> nella nostra applicazione in base al <em>path<\/em> di navigazione presente nella URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ricordiamoci anche di aggiungere il <em>RouterModule<\/em> alla lista degli <strong>exports<\/strong>, per poterlo importare dai diversi moduli usati nell\u2019applicazione.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nexports: &#x5B; \n                RouterModule \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Il secondo passaggio \u00e8 quello di sostituire il component che vogliamo mostrare ad un determinato <em>path<\/em> con l\u2019istruzione:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nloadChildren: () =&gt; import(&#039;.\/first\/first.module&#039;).then(m =&gt; m.FirstModule) \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">ottenendo<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forRoot(&#x5B;  \n                        {path: &#039;first&#039;,  loadChildren: () =&gt; import(&#039;.\/first\/first.module&#039;).then(m =&gt; m.FirstModule) },  \n                        {path: &#039;second&#039;, component: SecondComponent},  \n                ]), \n... \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">E aggiungendo il <em>routing<\/em> anche in <em>FirstModule<\/em><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nconst routes: Routes = &#x5B; { path: &#039;&#039;, component: FirstComponent} ]; \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Ma, stavolta, mediante l\u2019istruzione <strong>forChild <\/strong>(in seguito vedremo la differenza tra forChild e forRoot)<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nimports: &#x5B; \n                RouterModule.forChild(routes) \n] \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Infine, assicuriamoci che <em>FirstModule<\/em> non sia presente nell\u2019<em>array imports<\/em> dell\u2019<em>AppModule<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per verificare di aver configurato il tutto correttamente, possiamo far partire l\u2019applicazione e aprire il developer tool del browser, posizionandoci nella sezione Network.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A questo punto, quando proveremo a navigare verso <em>FirstComponent<\/em>, apparir\u00e0 una chiamata simile a quella in figura:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"665\" data-attachment-id=\"32771\" data-permalink=\"https:\/\/blexin.com\/it\/?attachment_id=32771\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01.png?fit=1149%2C746&amp;ssl=1\" data-orig-size=\"1149,746\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"LazyLoadingImage01\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01.png?fit=1024%2C665&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01.png?resize=1024%2C665&#038;ssl=1\" alt=\"\" class=\"wp-image-32771\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-1024x665.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-980x636.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage01-480x312.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Questa chiamata verr\u00e0 effettuata una sola volta per ogni modulo caricato mediante il Lazy Loading, ovvero la prima volta che accederemo a quel path, nel nostro caso <strong><em>localhost:4200\/first.<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per concludere l\u2019argomento, va sicuramente chiarita la differenza tra <strong>forRoot <\/strong>e <strong>forChild<\/strong>, vediamo perch\u00e9 abbiamo utilizzato forRoot nell\u2019AppModule e forChild nei feature Module.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il modulo <em>RouterModule <\/em>possiede un suo service per la gestione delle rotte, tale service \u00e8 un singleton e va quindi registrato una sola volta all\u2019interno dell\u2019applicazione.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per dare la possibilit\u00e0 di registrare il service una sola volta, il team di Angular ha esposto i due metodi statici <em>forRoot <\/em>e <em>forChild<\/em>, che ritornano una interfaccia di tipo <strong>ModuleWithProviders<\/strong>. In Angular, infatti, \u00e8 possibile importare un modulo anche mediante l\u2019interfaccia&nbsp; <em>ModuleWithProviders<\/em>, che ha la seguente struttura:&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\ninterface ModuleWithProviders&lt;T&gt; {  \n        ngModule: Type&lt;T&gt;  \n        providers?: Provider&#x5B;]  \n} \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In questo modo, oltre al modulo viene importata anche la lista dei provider associati ad esso, in modo tale che vengano registrati nel motore di <em>dependency injection<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>forRoot<\/em> restituisce un oggetto di tipo <em>ModuleWithProviders<\/em> contenente come ngModule il RouterModule e nella lista di providers ritorna il <em>RouterService<\/em>. <em>forChild<\/em>, invece, restituisce lo stesso oggetto, ma con la lista di providers vuoti. In questo modo, ci si assicura che RouterService sia registrato una sola volta.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Infatti, provando a registrare <em>RouterModule<\/em> mediante il metodo <em>forRoot<\/em>, anche in uno dei feature module si ottiene il seguente errore in console quando si accede al path del modulo in questione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"542\" data-attachment-id=\"32775\" data-permalink=\"https:\/\/blexin.com\/it\/?attachment_id=32775\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?fit=828%2C542&amp;ssl=1\" data-orig-size=\"828,542\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"LazyLoadingImage02\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?fit=828%2C542&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png?resize=828%2C542&#038;ssl=1\" alt=\"\" class=\"wp-image-32775\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02.png 828w, https:\/\/blexin.com\/wp-content\/uploads\/2021\/05\/LazyLoadingImage02-480x314.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 828px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Spero che l\u2019argomento sia stato di vostro interesse e, se volete approfondire l\u2019uso di questo framework, vi invito a leggere <a href=\"https:\/\/blexin.com\/it\/tag\/angular\/\" target=\"_blank\" rel=\"noreferrer noopener\">gli articoli su Angular<\/a> del nostro blog .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Vediamo come importare i moduli in maniera efficiente<\/p>\n","protected":false},"author":196716250,"featured_media":32760,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387],"class_list":["post-32782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Usiamo il Lazy Loading pattern in Angular - Blexin<\/title>\n<meta name=\"description\" content=\"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usiamo il Lazy Loading pattern in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-04T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-06T07:39:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1105\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adolfo Arnold\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adolfo Arnold\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/\"},\"author\":{\"name\":\"Adolfo Arnold\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"headline\":\"Usiamo il Lazy Loading pattern in Angular\",\"datePublished\":\"2021-05-04T16:00:00+00:00\",\"dateModified\":\"2021-05-06T07:39:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/\"},\"wordCount\":649,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/\",\"name\":\"Usiamo il Lazy Loading pattern in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"datePublished\":\"2021-05-04T16:00:00+00:00\",\"dateModified\":\"2021-05-06T07:39:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"description\":\"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1\",\"width\":1105,\"height\":656,\"caption\":\"angular lazy loading\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/usiamo-il-lazy-loading-pattern-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usiamo il Lazy Loading pattern in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\",\"name\":\"Adolfo Arnold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"caption\":\"Adolfo Arnold\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/adolfo-arnoldblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Usiamo il Lazy Loading pattern in Angular - Blexin","description":"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/","og_locale":"it_IT","og_type":"article","og_title":"Usiamo il Lazy Loading pattern in Angular - Blexin","og_description":"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern","og_url":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/","og_site_name":"Blexin","article_published_time":"2021-05-04T16:00:00+00:00","article_modified_time":"2021-05-06T07:39:22+00:00","og_image":[{"width":1105,"height":656,"url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","type":"image\/png"}],"author":"Adolfo Arnold","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Adolfo Arnold","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/"},"author":{"name":"Adolfo Arnold","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"headline":"Usiamo il Lazy Loading pattern in Angular","datePublished":"2021-05-04T16:00:00+00:00","dateModified":"2021-05-06T07:39:22+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/"},"wordCount":649,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/","url":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/","name":"Usiamo il Lazy Loading pattern in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","datePublished":"2021-05-04T16:00:00+00:00","dateModified":"2021-05-06T07:39:22+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"description":"Migliora le perfomance della tua applicazione Angular caricando i moduli solo quando \u00e8 necessario con il Lazy Loading pattern","breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","width":1105,"height":656,"caption":"angular lazy loading"},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/usiamo-il-lazy-loading-pattern-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Usiamo il Lazy Loading pattern in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517","name":"Adolfo Arnold","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","caption":"Adolfo Arnold"},"url":"https:\/\/blexin.com\/it\/author\/adolfo-arnoldblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2021\/05\/ITA_9_1105x656_blog-lazy.png?fit=1105%2C656&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-8wK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/32782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716250"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=32782"}],"version-history":[{"count":19,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/32782\/revisions"}],"predecessor-version":[{"id":32823,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/32782\/revisions\/32823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/32760"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=32782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=32782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=32782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}