Lo stesso JavaScript su diverse pagine web

0

Ho un sito web con diverse pagine web. Ogni pagina richiede JavaScript: cioè JavaScript diverso per pagine diverse, che alcuni JavaScript sono comuni a tutte le pagine.

Alcuni JavaScript sono lunghi (ad esempio 4000 righe di codice). Ho codificato il codice JavaScript utilizzando il modello base Export del modulo descritto in Adequately Good's Pattern modulo JavaScript: In- Profondità articolo.

Ad ogni modo, ora sto pensando di usare un minificatore JavaScript per:

  • Combina diversi file di origine JavaScript in uno
  • Includi lo stesso, unico file sorgente JavaScript su ogni pagina web

Spero che questo risolva due problemi:

  • In fase di progettazione, è facile riutilizzare i moduli JavaScript esistenti (poiché i moduli esistenti devono essere progettati come moduli riutilizzabili, inclusi e quindi disponibili su ogni pagina Web)
  • In fase di esecuzione, è performante: poiché il browser dell'utente (che include i browser mobili) ha solo un file sorgente JS da scaricare; e quel file è presumibilmente già memorizzato nella cache del browser quando carica una seconda o una terza pagina Web (ad esempio qualsiasi pagina tranne la prima).

È una cosa ragionevole da fare? È normale o è una cosa del WTF da fare? Ci sono degli svantaggi che dovrei considerare, e sono significativi?

Esito perché implica il caricamento del codice in una pagina, che non è richiesta da quella pagina. OTOH è probabilmente ciò che accade quando carichi una libreria JavaScript di terze parti (ad esempio, carichi l'intera libreria ma non tutte le sue funzionalità).

    
posta ChrisW 20.04.2017 - 21:18
fonte

3 risposte

1

Ho visto questo fatto molto bene (applicazione a singola pagina) e fatto molto male (il ricaricamento delle pagine richiede talvolta fino a 15 secondi). Si prega di considerare il caricamento parziale della pagina e un approccio applicativo a pagina singola per le prestazioni se si desidera ottimizzare il JavaScript per ogni pagina in un singolo file che viene caricata per ogni pagina. Ciò ti consentirà di caricare tutto il codice JavaScript e quindi di eliminare e riscrivere il DOM in base alle interazioni tra script. Il JavaScript viene caricato per la prima volta con caricamento parziale della pagina per la percezione dell'utente, ma poi tutte le altre navigazioni di pagina sono veloci poiché tutto il codice è precaricato dal JavaScript al caricamento iniziale della pagina.

  • Applicazione per pagina singola
  • Caricamento pagina parziale : Non ho trovato un link valido per il caricamento parziale della pagina, ma fondamentalmente si caricano le viste ma ci sono altre viste all'interno di quelle che non si caricano, quindi lo schermo inizia con intestazioni / piè di pagina / alcuni contenuti con immagini e sezioni, quindi pubblica -pagina caricamento javascript è attivato per sostituire le porzioni DOM con contenuti aggiuntivi come tabelle incorporate o altre azioni che richiedono più tempo. Appare quindi all'utente la pagina caricata, ma finisce mentre legge e sposta il mouse senza ricaricare la pagina intera.
risposta data 20.04.2017 - 22:28
fonte
1

I hesitate because it implies code being loaded into a page, which isn't required by that page.

A meno che non sia ridicolmente grande, lo tratterei come qualsiasi altra libreria in cui non utilizzi tutte le funzioni su una determinata pagina (come tu stesso menzioni). Vai avanti.

Una cosa da tenere a mente: assicurati che la tua 'libreria' non sia in conflitto con altre librerie / funzioni disponibili nella pagina.

    
risposta data 21.04.2017 - 11:49
fonte
0

tl; dr

1) Crea obiettivi conrete

2) Misura prima di implementare

3) Misura dopo l'implementazione, se hai raggiunto gli obiettivi

Dal livello di dettaglio che presenti qui, è difficile dire quale sia esattamente il tuo problema e se la soluzione che cerchi di implementare risolva effettivamente questo problema.

Qual è il tuo attuale punto di dolore? Senza saperlo, uno ha bisogno di una buona palla di vetro funzionante per aiutarti - il mio è solo rotto.

Combine several the JavaScript source files into one

In alcune circostanze, questa potrebbe essere una buona cosa da fare. A seconda del dispositivo di destinazione e / o della rete di destinazione.

  • Se stai facendo il cellulare, hai il vantaggio che, quando il file è già nella cache del browser, una seconda richiesta con il flaky - mobile è quasi sempre instabile - le condizioni della rete sono gratuite. Quindi potrebbe essere una buona idea concatenare e minimizzare il tuo javascript. D'altra parte, il tempo di caricamento della pagina può aumentare se si riceve al primo caricamento una grande porzione di JS che deve essere prima scaricata (su una connessione forse lenta e instabile ) e quindi interpretato per il primo utilizzo del sito. Senza numeri concreti è difficile giudicare se sia accettabile per te (o per i tuoi utenti) o meno.

  • Supponiamo che tu stia mirando agli utenti desktop - anche se i dispositivi mobili sono in aumento, questo non è un obiettivo insolito - con una connessione affidabile a 50 Mbps, la domanda potrebbe essere legittima da chiedere, quali sono i benefici attesi da la tua strategia?

  • In cima: se stai sviluppando una soluzione intranet, è più difficile rispondere alla domanda sulla minificazione.

Potrebbe esserci un'altra strategia, inclusa solo una scheletro di funzionalità al primo carico e recuperare in modo dinamico JS aggiuntivo, se necessario.

Ci sono molte soluzioni a molti problemi.

Include that same, single JavaScript source file on every web page

Questa potrebbe o non potrebbe essere un'opzione valida.

At design time, it's easy to reuse existing JavaScript modules (because the existing modules must be designed as reusable modules, included on and therefore available on every web page)

La modularità è una cosa carina e con una base di codice composta da 4k LOC è la cosa più ovvia da fare per mantenere uno stato mentale sano.

At run-time, it's performant: because the user's browser (which includes mobile browsers) only has one JS source file to download; and that file is presumably already cached in the browser when it loads a second or a third web page (i.e. any page except the first

Questo è in qualche modo un punto valido. Se uno script viene interpretato per la prima volta, l'interprete produce i dati della cache ed è in grado di riutilizzare queste informazioni per offrire un'esperienza utente più rapida nelle visite successive.

D'altra parte: questo vale anche per più file JS. Una volta caricati, vengono anche memorizzati nella cache.

Is this a reasonable thing to do? Is it normal, or is it a WTF thing to do? Are there disadvantages I should consider, and are they significant?

Se non fornisci ulteriori dettagli, la risposta è: forse (non).

I hesitate because it implies code being loaded into a page, which isn't required by that page.

Quindi cosa? È la tua applicazione. Finché raggiungerai i tuoi obiettivi con il design, a chi importa? Sei al comando.

    
risposta data 21.04.2017 - 11:32
fonte

Leggi altre domande sui tag