Divisió de codi a Svelte JS + Routify

Bloc

Divisió de codi a Svelte JS + Routify

La divisió de codi és un nom elegant de les importacions dinàmiques a ECMAScript (ES) .



És una opció recomanable quan es fan aplicacions més grans del costat del client que necessiten un rendiment més ràpid en diferents dispositius.

Preguntes d’entrevistes a Amazon Business Analyst

En aquest article, vegeu una manera experimental de com podem dividir el codi.



L'objectiu no és descarregar ni executar alguna cosa que l'usuari no vulgui.

Desenvolupar ha estat compatible amb la divisió de codi en forma d'importacions dinàmiques.



Només es tracta de configurar el paquet acumulatiu perquè restringeixi totes les importacions dinàmiques.

La millor tècnica és divideix el codi al nivell del router.

Rutificar és un encaminador prometedor basat en fitxers que ha estat compatible amb les importacions dinàmiques com a opció. Per tant, és bo utilitzar-lo segons les necessitats de la nostra aplicació.

Abans de començar la configuració real, vegeu algunes coses bàsiques.

Importacions estàtiques vs dinàmiques

Les importacions estàtiques es van situar al nivell superior i es van resoldre amb avidesa a l’hora de construir.

//Static ES import import Card from '../components/Card.svelte'; //svelte template can be used as component

Les importacions dinàmiques anomenades com a funció i retornen una promesa, això crearà el seu propi fragment quan s’agrupa. Això es pot anomenar divisió de codi.

//Dynamically load component on demand (lazy load) let Card; import('../components/Card.svelte') .then(result => Card = result.default); // this will be used {#if Card} {/if}

Aquest resultat acumulatiu dividirà el fitxer com a Card- [hash] .js (vegeu documents )

Tipus de divisió de codi

El codi es pot dividir de dues maneres.

1. Nivell de router o nivell de pàgina (recomanat): poden ser diversos components que es poden carregar en una sola pàgina.

2. Nivell de component o nivell de fitxer (temporal): es pot carregar el component únic sota demanda que es pot anomenar una càrrega mandrosa a l'acció de l'usuari.

consells i trucs de codificació

Anti-patró

Hi ha alguns NO coses considerades com a anti-patró en diferents marcs.

  • Divisió de codi de manera automatitzada de tots els components
  • Les biblioteques tenen el seu propi repartiment de codi

Perquè hem d’entendre l’objectiu i el cas d’ús real de la divisió de codi.

# svelte-3 #javascript #routify #rollup # divisió de codi #programació

levelup.gitconnected.com

Divisió de codi a Svelte JS + Routify

Divideix el nostre codi en trossos més petits i millora el temps de càrrega de la pàgina en aplicacions més grans del costat del client. La divisió de codi és un nom elegant de les importacions dinàmiques a ECMAScript (ES). És una opció recomanable quan es fan aplicacions més grans del costat del client que requereixen un rendiment més ràpid en diferents dispositius. En aquest article, vegeu una manera experimental de com podem dividir el codi.