Tinder utilizzava una sequela di librerie open source (vendor) come brandello del loro pianta delle dipendenze. Le modifiche a queste librerie originariamente avrebbero originato la modificazione di [chunkhash] e l’invalidazione della loro cache. Durante estinguere presente problema, Tinder ha esperto a definire una whitelist di dipendenze esterne e a suddividere il manifest del fagotto web dal carnet direttore durante ristabilirsi la registrazione nella cache. La rilievo del bundle e adesso di pressappoco 160 KB in entrambi i blocchi.
Precaricamento delle risorse scoperte in ritardo
Tinder ha implementato il aiuto verso precaricare i bundle JavaScript / webpack critici cosicche erano importanti a causa di l’esperienza di inizio. Questo ha adunanza il periodo di caricamento di 1 secondo e la inizialmente facciata da 1000 ms an approssimativamente 500 ms.
Bilancio delle prestazioni
Tinder ha adottato somma in il rendimento attraverso aiutarli a raggiungere i loro obiettivi di rendimento sui dispositivi mobili. Appena ha notato Alex Russell mediante ” Te lo puoi concedere ?: stanziamento verso le prestazioni del ripulito effettivo “, hai un contorno di macchinazione limitato verso offrire un’esperienza laddove si considerano le connessioni 3G obbiettivo utilizzate contro hardware arredo medio.
In acquisire e fermarsi interattivi prontamente, Tinder ha imposto un preventivo di
155 KB verso i blocchi principali e del grossista, i blocchi asincroni (caricati indolentemente) sono
55 KB e estranei blocchi sono
35 KB. CSS ha un limite di 20 KB. Questo e stato basilare in dare per certo che fossero mediante classe di scansare il regresso delle prestazioni.
Esame del insieme Webpack
Webpack Bundle Analyzer ti consente di svelare come appare il diagramma delle dipendenze attraverso i tuoi bundle JavaScript in atteggiamento da poter scoperchiare dato che ci sono frutti bassi da sfruttare.
Tinder ha usato Webpack Bundle Analyzer per rivelare aree di perfezionamento:
https://hookupdate.net/it/hi5-review/
Webpack Bundle Analyzer puo risiedere integrato nella fisionomia di Webpack. La figura di Tinder e paragonabile a questa:
Disegno CSS
Tinder utilizza Atomic CSS durante creare stili CSS altamente riutilizzabili. Tutti questi stili CSS atomici sono inline nella colore iniziale e brandello del reperto del CSS viene affettato nel lastra di modo (inclusi gli stili di animazione o di inizio / recupero). Gli stili critici hanno una grandezza aforisma di 20 KB unitamente livellamento gzip, insieme build recenti cosicche arrivano a una peso
Tinder Online utilizza ed il plug- per PostCSS Autoprefixer a causa di esplorare CSS e aggiungere prefissi del grossista con inizio alle regole di Posso impiegare :
Differire il faccenda non studioso mediante requestIdleCallback ()
Attraverso ottimizzare le prestazioni di runtime, Tinder ha esperto di impiegare requestIdleCallback () attraverso respingere le azioni non critiche mediante periodo di inattivita.
Utilizzo di requestIdleCallback () in i beacon di strumentazione durante lo deflusso:
Aggiornamenti delle dipendenze
Webpack 3 + Scope Hoisting
Nelle versioni precedenti di webpack, nello spazio di il riunione di ciascuno elemento nel involto sarebbe condizione inserito in singole chiusure di funzioni. Queste funzioni wrapper hanno reso oltre a lenta l’esecuzione di JavaScript nel browser. Webpack 3 ha incluso il “sollievo dell’ambito”: la abilita di concatenare l’ambito di tutti i moduli durante un’unica barriera e accogliere al manoscritto di avere un opportunita di esecuzione ancora fulmineo nel browser. Lo fa con il plugin Module Concatenation:
Reagisci 16
React 16 ha istruito miglioramenti in quanto hanno piccolo la rilievo del blocco di React considerazione alle versioni precedenti. Cio e status mediante ritaglio adeguato a un miglior packaging (utilizzando Rollup) e alla spostamento del combinazione dunque inutilizzato.
Aggiornando da React 15 a React 16, Tinder ha ridotto le dimensioni totali mediante gzip del loro macigno del negoziante del
La rilievo di React + React – Dom periodo di
50 KB mediante livellamento gzip e adesso e solo di
35 KB . Ringraziamento a Dan Abramov , Dominic Gannaway e Nate Hunzaker perche sono stati determinanti nel concentrare le dimensioni del bundle di React 16.
Casella di fatica per la resilienza della rete e la registrazione nella cache degli asset offline
Tinder utilizza ed il plug -in Workbox Webpack verso registrare nella cache come la shell dell’applicazione cosicche le risorse statiche principali maniera i bundle principali, del venditore, manifest e CSS. Cio consente la resilienza della organizzazione verso le visite ripetute e garantisce in quanto l’applicazione si avvii piu celermente dal momento che un cliente torna durante le visite successive.
Opportunita
Scavando nei bundle di Tinder utilizzando source-map-explorer (un seguente arnese di esame dei bundle), ci sono ulteriori vantaggio a causa di abbreviare le dimensioni del payload. Precedentemente di accedere, vengono recuperati componenti appena ritratto di Facebook, notifiche, messaggi e captcha. Allontanarli dal distanza incerto potrebbe far graziare astuto al 20% sul involto direttore:
Un’altra succursale nel prassi arduo e singolo script Facebook SDK da 200 KB. L’eliminazione di questo script (che potrebbe avere luogo aumentato pigramente dal momento che necessario) potrebbe abbreviare di 1 secondo il epoca di carica sigla.
Conclusioni
Tinder sta ancora iterando sulla sua Progressive Web App, ciononostante ha in precedenza seguace a vedere risultati positivi dai frutti del conveniente fatica. Dai un’occhiata a Tinder.com e resta sintonizzato per ulteriori progressi nel attiguo futuro!
Ringraziamento e congratulazioni a Roderick Hsiao, Jordan Banafsheha ed Erik Hellenbrand verso il lancio di Tinder Online e il loro tributo a corrente scritto. Ringraziamento a Cheney Tsai attraverso la sua giudizio.