Ce este conducta de active

BY admin
|

obiective

  1. înțelegeți cele 4 caracteristici principale ale conductei de active.
  2. identificați căile de active
  3. știți cum manifestele de active oferă concatenarea CSS și JS.
  4. utilizați limbaje de preprocesare precum Sass sau CoffeeScript
  5. definiți amprentarea activelor

schiță

pentru o lungă perioadă de timp, am tratat JavaScript și CSS ca o gândire ulterioară în dezvoltarea aplicațiilor web. Toate codul nostru activ-lucruri cum ar fi imagini, foi de stil, și JavaScripts — a fost păstrat într-un folder masiv numit public și a servit în afara contextului aplicației noastre Rails. Pe măsură ce Internetul a evoluat, acest lucru nu mai avea sens.

conducta de active este răspunsul Rails la gestionarea foilor de stil, JavaScripts și imagini.

căi de active

o mulțime de fișiere intră în crearea de aplicații web. CSS și JavaScript fișiere singur poate fi greu de organizat. Ce foldere creăm? Ce fișiere merg unde? Conducta de active oferă un răspuns pentru această problemă. Trebuie să păstrăm lucrurile foarte organizate în aplicația noastră, dar, păstrând fișiere și foldere separate pentru fiecare concept sau unitate de cod, avem 2 probleme.

  1. de unde știe Rails unde sunt lucrurile? Este fișierul calendar JS în app/assets/javascripts/calendar.js sau vendor/javascripts/calendar.js?
  2. nu vrem să servim fiecare fișier separat, deoarece acest lucru va face ca pagina noastră să se încarce foarte lent. Este logic pentru noi să menținem fișiere mici separate pentru lizibilitate și organizare, dar, pentru browser, preferăm să spargem toate acele fișiere mici împreună și să încărcăm 1 fișier JS și 1 fișier CSS. Acest proces se numește concatenare.

să vorbim despre prima noastră problemă: cum știu șinele unde să caute? Conducta de active are un concept numit căi de active pentru gestionarea acestui lucru. La fel ca în BASH, unde avem o variabilă de mediu PATH care este o combinație de căi de folder, calea activului este o combinație de căi de folder pentru Rails pentru a căuta active în. Să aruncăm o privire la un exemplu despre modul în care este configurată calea noastră de active.

Rails.application.config.assets.paths =>

dacă punem un activ în oricare dintre aceste foldere, le putem accesa prin URL-ul ‘/assets’ din aplicația noastră. Dacă aveți foldere suplimentare pentru căutarea Rails, puteți adăuga folderele la Calea activului. Acest lucru se face în fișierul config/initializers/assets.rb.

Rails.application.config.assets.paths << "New Path"

putem pune active oriunde, putem configura calea activelor noastre și le putem accesa printr-o singură adresă URL ‘/assets’.

manifest și concatenare

acum, că putem pune fișiere oriunde, cum le facem să fie incluse în paginile noastre web? Conducta de active folosește un fișier manifest pentru a spune Rails ce să încarce. Acest fișier manifest este o locație centrală în care putem enumera toate fișierele CSS și JS de care are nevoie aplicația noastră. Aceasta nu este o caracteristică a JS sau CSS, ci mai degrabă conducta de active. Iată un exemplu despre cum arată fișierul nostru manifest JS:

fișier: app/assets/javascripts/application.js 

//= require jquery//= require calendar

când includeți fișierul manifest în aspectul dvs. cu javascript_include_tag, conducta de active va căuta toate fișierele listate în calea de active. Observați cum avem nevoie de calendar. Acest fișier trăiește în app/assets/javascripts/calendar.js , dar am specificat doar numele și nu calea completă. Conducta de active va căuta toate căile configurate pentru un fișier cu numele pe care l-am furnizat.

acum că am rezolvat problema descoperirii, să vorbim despre concatenare. Așa cum am discutat mai devreme, nu vrem să încărcăm fișierele noastre în browser unul câte unul. Este mai bine să efectuați o descărcare decât o grămadă de descărcări mici din browserul nostru. Fișierele manifest pe care le configurăm în Rails vor concatena automat fișierele listate în ele într-un singur fișier în producție. Acest lucru nu ar putea fi cea mai bună opțiune atunci când suntem în curs de dezvoltare aplicația noastră, deoarece se poate face depanare greu. Cu toate acestea, Rails va servi de fapt fiecare fișier separat atunci când rulăm în modul de dezvoltare. Nu e nevoie să faci nimic.

în cele din urmă, directivele pinionului care alimentează activul nostru vor fi acoperite în detaliu mai târziu.

preprocesarea

posibilitatea de a combina fișiere și de a le încărca dintr-un set de locații predefinite din aplicația noastră este un mare beneficiu al conductei de active. Ăsta e doar începutul. Deoarece încărcăm active prin șine, putem preprocesa fișierele folosind limbi populare precum SCSS pentru a scrie CSS mai bun și Coffeescript pentru JS mai curat. Dacă faceți un activ numit temă.css.scss, vi se spune conducta de active pentru a rula fișierul prin preprocesor SCSS înainte de servire temă.css pentru browser. Preprocesorul SCSS compilează fișierul în CSS. Singurul lucru pe care a trebuit să-l facem a fost să furnizăm extensia corectă a fișierului, .scss, fișierului și conducta de active știe să o ruleze prin preprocesorul SCSS.

amprentarea

ultimul beneficiu despre care vom vorbi este amprentarea, dar mai întâi să vorbim despre problema pe care ne ajută să o rezolvăm. Când servim fișiere în browser, este posibil ca acestea să fie memorate în cache pentru a evita descărcarea lor din nou în viitor. Ce este cache-ul pe care l-ați putea întreba?

Caching ceva înseamnă păstrarea unei copii a unei operațiuni consumatoare de timp la nivel local, astfel încât să nu trebuie să refaceți din nou operațiunea scumpă dacă intrările și ieșirile vor fi exact aceleași. Cache-urile sunt de obicei magazine de valori cheie, unde valoarea este răspunsul la operația costisitoare, iar cheia este ceva unic pentru acel element. Dacă solicitați o pagină de la server și apoi solicitați din nou aceeași pagină de la server, cel mai rapid mod de a îndeplini această solicitare este să păstrați de fapt o copie a ceea ce ați primit ultima dată la nivel local. Browserele memorează în cache o mulțime de răspunsuri pe care le primesc la solicitările pe care le-au făcut folosind anteturile care sunt trimise cu răspunsul. Anteturile spun browser-ul cât timp pagina rămâne ‘proaspete’ înainte de a ‘ expiră.’Odată ce pagina a expirat, browserul va face o nouă solicitare pentru ca pagina să-și reîmprospăteze memoria cache. Noi spunem că cea mai rapidă cerere este cererea care nu este făcută. De asemenea, se spune adesea că invalidarea cache-ului este una dintre cele două probleme grele din Informatică, așa că gândiți-vă cu atenție când începeți să memorați în cache lucrurile! Caching salvează lățime de bandă pentru noi și oferă un impuls de viteză pentru utilizator. Acest lucru este minunat până când schimbați fișierul și doriți ca toți utilizatorii dvs. să îl obțină pe cel nou în loc de versiunea veche pe care au stocat-o în memoria cache a browserului. Dar cum anunțăm browserul că am modificat fișierul? Dacă noua versiune are același nume ca versiunea veche, browserul va continua să utilizeze fișierul vechi din memoria cache. Avem nevoie de o modalitate de a schimba numele fișierului atunci când conținutul se schimbă, astfel încât browserele să nu continue să servească fișierul vechi.

From the Rails Guides Primer

„amprentarea este o tehnică care face ca numele unui nume de fișier să depindă de conținutul fișierului. Când conținutul fișierului se schimbă, numele fișierului este, de asemenea, schimbat. Pentru conținutul static sau modificat rar, aceasta oferă o modalitate ușoară de a spune dacă două versiuni ale unui fișier sunt identice, chiar și pe servere sau date de implementare diferite.

când un nume de fișier este unic și bazat pe conținutul său, anteturile HTTP pot fi setate pentru a încuraja cache-urile de pretutindeni (fie la CDN-uri, la ISP-uri, în echipamente de rețea sau în browsere web) să păstreze propria copie a conținutului. Când conținutul este actualizat, amprenta se va schimba. Acest lucru va determina clienții la distanță să solicite o nouă copie a conținutului. Acest lucru este cunoscut sub numele de cache busting.

tehnica pinioane folosește pentru amprentarea este de a adăuga un hash a conținutului la sfârșitul numelui fișierului. De exemplu, luați un fișier CSS numit global.css. Pinioanele vor adăuga hash-ul 908e25f4bf641868d8683022a5b62f54 la sfârșitul numelui fișierului ca atare:

global-908e25f4bf641868d8683022a5b62f54.css

dacă se întâmplă să utilizați o versiune mai veche a Rails (Rails 2.x), strategia a fost de a adăuga un șir de interogare bazat pe date la fiecare activ legat de un ajutor încorporat. Acest lucru arata ca asa:

global.css?1309495796

strategia șirului de interogare are mai multe dezavantaje:

  • nu toate cache-urile vor cache în mod fiabil conținutul în care numele fișierului diferă doar în funcție de parametrii de interogare.
    • Steve Souders recomandă „evitarea unei interogări pentru resurse cache.”5-20% din cererile dvs. nu vor fi memorate în cache. Șirurile de interogare, în special, nu funcționează deloc cu unele CDN-uri pentru invalidarea cache-ului.
  • numele fișierului se poate schimba între noduri în medii multi-server.
    • șirul de interogare implicit în Rails 2.x se bazează pe timpul de modificare a fișierelor. Atunci când activele sunt implementate într-un cluster, nu există nicio garanție că marcajele de timp vor fi aceleași, rezultând valori diferite utilizate în funcție de serverul care gestionează solicitarea.
  • prea multă invalidare a cache-ului.
    • când activele statice sunt implementate cu fiecare nouă versiune de cod, mtime (ora ultimei modificări) a tuturor acestor fișiere se schimbă, forțând toți clienții la distanță să le aducă din nou, chiar dacă conținutul acestor active nu s-a schimbat.

amprentarea rezolvă toate aceste probleme asigurându-se că numele fișierelor sunt consecvente pe baza conținutului lor.

amprentarea este activată implicit pentru producție și dezactivată pentru toate celelalte medii. Puteți să o activați sau să o dezactivați în configurația dvs. prin opțiunea config.assets.digest.”

concluzie

conducta de active este cu siguranță mai complexă decât servirea doar a activelor dintr-un folder public și poate fi greu de depanat. Învățarea modului de utilizare a acestuia va da roade pe termen lung, economisindu-ne timp și dureri de cap. Gândește-te la toate problemele pe care le rezolvă pentru noi.

  1. căi de active
  2. manifeste și concatenare
  3. preprocesare
  4. amprentare

în cele din urmă, verificați cu siguranță nota principală în care DHH introduce conducta de active.