Lighthouse de la Google recomandă acum biblioteci JavaScript alternative

Publicat: 2021-01-06

Folosind noțiunea de far ca metaforă, Google Lighthouse îndepărtează dezvoltatorii de stânci, punând în lumină problemele pe care le descoperă, de la activ la activ. Cu feedback specific pentru îmbunătățirea performanței și a securității, rapoartele includ referințe la media care ar putea folosi redimensionarea cu compresie, politici noi sau diferite de cache și fișiere legate care conțin blocuri de CSS și/sau JavaScript neutilizate.

Până în septembrie, însă, Google nu a apelat în sine bibliotecile JavaScript.

Și acum, avertismentele au treptat să apară în Page Speed ​​Insights.

Un cuvânt despre JavaScript

În lumea JavaScript open-source, dezvoltatorii stau pe umerii dezvoltatorilor care au venit înaintea lor, în special pe cei care au rezolvat ceva care altfel ar trebui să fie rezolvat de un nou autor de bibliotecă. Sistemul de ambalare JavaScript predominant NPM (Node Package Manager) facilitează includerea bibliotecilor preexistente în proiectul dumneavoastră. La punctul de plecare, un anumit proiect JavaScript este întotdeauna vârful unui aisberg format din mult mai mult JavaScript dedesubt, stocat de obicei de NPM în directorul .node_modules .

Este de la sine înțeles că proiectele, în special cele create folosind un cadru sofisticat, ar folosi întotdeauna doar un procent mic din codul disponibil, în mare parte prin numeroase dependențe de bibliotecă. De aceea, există un proces de optimizare cunoscut sub numele de „tree shaking” pentru a grupa doar ceea ce este utilizat în mod activ de un proiect dat cât mai mult posibil. Tree sharing nu funcționează întotdeauna bine cu bibliotecile mai vechi din cauza obiectivelor în mișcare de a ține pasul cu sintaxa și modelele de codare moderne.

Despre Frameworks

Framework-urile ușurează viața dezvoltatorilor, eliminând complexitatea alegerii bibliotecii, configurarea bundlerilor și scrierea de scripturi pentru a automatiza procesele de optimizare pentru producție. Cu o rețetă de „pornire rapidă” care se găsește în majoritatea documentației, dezvoltatorii pot începe și rula scripturi de interpret pentru linia de comandă prescrise care fac parte din majoritatea cadrelor pachetate. Un exemplu în acest sens este aplicația Create React, care conține codul de aplicație React necompletat, gata pentru a le dezvolta în continuare într-o aplicație web.

$ npx create-react-app aplicația-mea

Rularea comenzii de mai sus creează un director „aplicația mea” și generează în el întregul arbore de directoare al aplicației React, complet cu toate fișierele și dependențele de bibliotecă necesare. Optimizarea pachetului de producție, care poate conține cod din mai multe biblioteci Javascript, este poate cel mai important motiv pentru care pachetele cadru moderne au instrumente și pași care elimină blocurile de cod neutilizate și minimizează producția.

Când alegeți să utilizați un cadru, acceptați, poate fără să cunoașteți toate detaliile, deciziile dificile de arhitectură, configurație și dependențe de bibliotecă ale acelui cadru. Iată ghidul pentru optimizarea React pentru producție de la creatorii popularei biblioteci frontend utilizate în prezent de multe proiecte și cadre precum NextJS.

Este prea obișnuit ca o mână de biblioteci mai vechi (foarte utile în zilele lor) să fi găsit drum în pachetele de proiecte ca dependențe. Site-urile web, bibliotecile și cadrele create înainte de etapele de referință JavaScript își arată vârsta atunci când folosesc coduri depreciate, deoarece JavaScript progresează în mod fundamental într-un ritm atât de vertiginos. Lighthouse servește acum ca un far pentru a vă avertiza atunci când proiectul dvs. include cod vechi și/sau vulnerabil.

MomentJS

O bibliotecă notabilă, MomentJS (cu 12 milioane de descărcări pe săptămână în septembrie 2020), este prima pe care Lighthouse o subliniază că are câteva opțiuni mai bune. Logica Google aici este de necontestat și destul de bine cunoscută. Ca răspuns, pagina de pornire și documentația Moment reflectă acum sfaturile oferite în raportarea Lighthouse. Momentul este înghețat, având doar actualizări de stabilitate planificate.

Alte biblioteci pe care Google le are sub microscop sunt Lodash și, eventual, Underscore. Au existat sentimente negative legitime exprimate în legătură cu acest lucru în întreaga comunitate de dezvoltatori, mai mulți dezvoltatori numindu-l „toxic” sau „dăunător” pentru comunitatea open-source. Plângerile au de-a face cu Google „rușinarea” bibliotecilor fără a oferi suficient context și promovarea alternativelor care pot dăuna descoperirii unor alternative de bibliotecă mai mici și mai puțin cunoscute.

Deși toate acestea sunt adevărate, este și adevărat că trebuie să spargi ouăle pentru a face o omletă. Progresul va răni adesea unii oameni. Google se bazează pe o referință terță parte (BundlePhobia) pentru a colecta liste de biblioteci alternative. Ei verifică în continuare alegerile bazate pe „bara ridicată pentru echivalență” și „ușurința migrației”, așa cum este determinat de echipa Lighthouse.

Autorii de biblioteci mai puțin cunoscuți pot intra în amestec trimițându-și biblioteca la serviciu. În plus, un dezvoltator a comentat că, deoarece Google recomandă acum în mod oficial biblioteci, acestea ar trebui să ajute la finanțarea open-source donând pentru proiect, iar un membru al echipei de pe Twitter a fost de acord să înceapă să facă acest lucru începând cu 2021.

Ce înseamnă asta pentru TechSEO

Este adevărat că practicanții TechSEO nu trebuie să fie dezvoltatori pentru a fi excelenți în meseria lor. De asemenea, este adevărat că, cu cât ești mai familiarizat cu lupta pe care o trec dezvoltatorii, poate învățând puțin despre codificare și măcar înțelegând cât mai mult detaliile farului Google, cu atât mai bine vei putea comunica dezvoltatorilor problemele și soluțiile practice. .

Înlocuirea cu ridicata MomentJS poate fi oriunde, de la super ușoară, la înfricoșător de complexă pentru destinatarul știrilor pe care trebuie să o înlocuiască. Cu excepția cazului în care sunteți un dezvoltator sau ați încercat cel puțin să vă ocupați de puțină dezvoltare web folosind biblioteci și cadre JavaScript moderne, vă va fi dificil să știți cât de dureros poate fi schimbarea unei biblioteci precum Moment pentru o alternativă mai mică pentru un proiect anume.

Are de-a face cu cât de mult a fost integrată acea bibliotecă în baza de cod. Este posibil ca modelele de cod să fie complet rescrise pe parcursul unei aplicații. Cu cât baza de cod al aplicației este mai mare și mai interconectată, cu atât va fi mai greu să realizați înlocuirea. Nu este întotdeauna la fel de simplu ca să spui „Folosește doar una dintre bibliotecile alternative pe care Google îți spune să le folosești.”

Unul dintre gândurile descurajante care pot apărea atunci când învățați că trebuie să înlocuiți Momentul provine din faptul că obiectele din bibliotecă sunt scrise pentru a fi mutabile (schimbabile). Păstrarea acestui model este văzută ca fiind necesară pentru compatibilitatea cu versiunea anterioară și acest lucru complică într-adevăr înlocuirea Moment cu o altă bibliotecă. Este posibil să fie nevoie să fie scrise blocuri întregi de cod pentru ca aplicația dvs. să accepte faptul că valorile variabile atribuite folosind Moment undeva într-un lanț de apeluri nu pot fi considerate ca valori imuabile în baza de cod a aplicației.

Un model modern care se bazează pe obiecte imuabile dintr-o bibliotecă mai nouă este mai stabil. Pentru a ajunge acolo poate fi nevoie de multă rescriere în fiecare caz în care Moment este folosit.

SEO pentru Dezvoltatori

Optimizarea JavaScript pentru producție ca sarcină este foarte mult în timonul TechSEO care lucrează la cod sau să ofere feedback unui dezvoltator care ar putea să nu fie familiarizat cu SEO, deoarece dezvoltatorii ar trebui să înțeleagă optimizarea performanței în primul rând. Nu se poate presupune că dezvoltatorii știu despre BundlePhobia, Lighthouse sau SEO.

Dacă ați ajuns până aici și doriți să aflați mai multe despre codificare pentru a oferi un serviciu mai bun clienților dvs., atunci aveți noroc. Anul acesta, vom produce Atelierul SEO pentru dezvoltatori ca un supliment opțional pentru seria de conferințe SMX. Informațiile prezentate vor fi direcționate pentru a vă ghida călătoria de oriunde vă aflați ca practician TechSEO, până oriunde căile noastre colective ne conduc spre codificare. Având în vedere cât de repede progresează lucrurile, cerul este limita!