Ionic 3 - Lazy Loading

Ionic 3 – Lazy Loading (lijeno učitavanje)

Share Button

Jedna od stvari koja me najviše oduševila kada je stigao Ionic 3 je Lazy Loading. Toliko sam bio oduševljen da sam samo tražio priliku gdje ću to moći ugraditi i uživati u svim prednostima koje donosi. Naravno ima u svojih nedostataka, ali s njima se može živjeti pa ćemo o tome malo kasnije.

Lazy Loading označava učitavanje pojedinih dijelova aplikacije po potrebi umjesto da se učita sve odjednom kao što je bilo slučaj do sada.

To konkretno znači sljedeće – kada ste prije kreirali nove stranice unutar aplikacije trebali ste ih sve uvesti unutar app.module.ts i također unutar svake stranice gdje ih planirate pozivati. Međutim sada to više ne morate raditi jer svaka kreirana stranica ima svoju datoteku naziv-stranice.module.ts i ne morate ju više uvoziti unutar app.module.ts niti bilo gdje drugdje unutar aplikacije nego ju možete odmah koristiti.

Prvo ću objasniti dosadašnji način kreiranja i međusobnog povezivanja stranica, a onda idemo na Lazy Loading putovanje.

Stari način

Kreiramo novu stranicu naredbom

I dobijemo sljedeću strukturu

Stranica primjer.ts izgleda ovako

Našu novu stranicu ne možemo koristiti u ostatku aplikacije dok ju ne uvezemo unutar app.module.ts.

I recimo da sada na HomePage želim staviti poveznicu na PrimjerPage. To mogu napraviti jedino ako prvo uvezem PrimjerPage unutar home.ts.

I sada zamislite aplikaciju u kojoj imate 20ak stranica i koje međusobno želite povezati. Kao prvo, sve ih trebate uvesti u app.module.ts, a onda još trebate razmišljati na kojim sve stranicama trebate uvesti određenu stranicu import { PrimjerPage } from './../primjer/primjer'; kako bi ju mogli pozvati unutar neke funkcije. Vrlo lako se izgubiti u svemu tome.

Novi način

Kreiramo novu stranicu naredbom

I dobijemo sljedeću strukturu

Stranica primjer.ts izgleda ovako. Jedina razlika obične i Lazy Loading strukture je u parametru IonicPage .

I naravno, trebamo vidjeti od čega se sastoji primjer.module.ts. I kao što možete vidjeti izgleda jednako kao i standardna src/app/app.module.ts datoteka.

I odmah smo spremni koristiti našu novu stranicu u ostatku aplikacije. Primijetit ćete da u ovom slučaju nisam morao uvesti PrimjerPage kako bi ju koristio unutar funkcije nego ju samo pozovem kao string 'PrimjerPage'.

Iz gore navedenog možete vidjeti koliko je Lazy Loading koristan i koliko olakšava rad s aplikacijom koja ima više stranica. Kao prvo ne morate ništa ručno uvoziti unutar app.module.ts niti morate misliti gdje ćete pozivati neku od stranica kako bi i nju uvezli, a uz to dobijete i malo bržu aplikaciju jer se neće sve učitavati odjednom.

Zaključak

Lazy Loading radi po principu – što manje to bolje. Njegovim korištenjem imate manje koda, manje uvoza i manje brige oko putanja do određenih stranica/klasa. Po mojem mišljenju, Lazy Loading je jedna od najboljih značajki Ionica 3 pa iako još uvijek nije obavezna mislim da bi ju svatko trebao koristiti. Naravno ne slažu se svi s tim.

Na kraju ostaje na vama da sami odlučite na koji ćete način složiti Ionic aplikaciju.

Prednosti:
– Poboljšava modularnost
– Ubrzava vrijeme učitavanja aplikacije
– Ubrzava korištenje aplikacije
– Omogućava deep linking

Nedostatci:
– Gubi se type checking

Objavio

Tomislav Stanković

Web i mobile developer. Uz to bavi se i temama vezanim uz online reputaciju. Google+

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *