Hva Er Eiendelen Rørledningen

BY admin
|

Mål

  1. Forstå 4 hovedtrekkene i eiendelen rørledningen.
  2. Identifiser Aktivabanene
  3. Vet Hvordan Aktiva Manifesterer gir sammenkobling AV CSS og JS.
  4. Bruk forbehandlingsspråk som SASS eller CoffeeScript
  5. Define Asset Fingerprinting

Outline

I lang tid behandlet Vi JavaScript og CSS som en ettertanke i utviklingen av webapplikasjoner. Alle våre aktivakoder — ting som bilder, stilark og JavaScripts-ble holdt i en massiv mappe kalt public og servert utenfor Konteksten til Rails-applikasjonen. Som web utviklet seg, som ikke lenger var fornuftig.

asset pipeline er Rails-svaret på å administrere stilark, JavaScripts og bilder.

Ressursbaner

mange filer går inn i å lage webapplikasjoner. CSS og JavaScript-filer alene kan være vanskelig å organisere. Hvilke mapper lager vi? Hvilke filer går hvor? Asset Pipeline gir et svar på dette problemet. Vi må holde ting veldig organisert i vår søknad, men ved å holde separate filer og mapper for hvert konsept eller kodeenhet, har vi 2 problemer.

  1. Hvordan Vet Rails hvor ting er? Er kalender js-filen i app/assets/javascripts/calendar.js eller vendor/javascripts/calendar.js?
  2. Vi ønsker ikke å betjene hver fil separat, da dette vil gjøre siden vår veldig treg. Det er fornuftig for oss å opprettholde separate små filer for lesbarhet og organisering, men for nettleseren vil vi heller knuse alle de små filene sammen og laste 1 js-fil og 1 CSS-fil. Denne prosessen kalles sammenkobling.

La oss snakke om vårt første problem: hvordan Vet Rails hvor de skal lete? Asset Pipeline har et konsept kalt Asset Paths for håndtering av dette. Akkurat som I BASH hvor vi har EN PATH-miljøvariabel som er en kombinasjon av mappebaner, Er Ressursbanen en kombinasjon av mappebaner For Rails å se etter eiendeler i. La oss ta en titt på et eksempel på hvordan Vår Ressursbane er konfigurert.

Rails.application.config.assets.paths =>

hvis vi setter en eiendel i noen av disse mappene, kan vi få tilgang til DEM via URL ‘/eiendeler ‘ i vår søknad. Hvis Du har flere mapper For Rails å søke, kan du legge til mappene I Aktivabanen. Dette gjøres i filen config/initializers/assets.rb.

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

Vi kan sette eiendeler hvor som helst, konfigurere Vår Ressursbane og få tilgang til DEM via en enkelt ‘/assets’ URL.

Manifester Og Sammenkobling

nå som vi kan sette filer hvor som helst, hvordan får vi dem til å bli inkludert i våre nettsider? Asset Pipeline bruker en manifest-fil for å fortelle Rails hva de skal laste. Dette manifest filen er et sentralt sted der vi kan liste opp ALLE CSS OG JS-filer våre programbehov. Dette er ikke en funksjon AV JS ELLER CSS, men heller asset pipeline. Her er et eksempel på hvordan VÅR js manifest-fil ser ut:

Fil: app/assets/javascripts / application.js

//= require jquery//= require calendar

når du inkluderer manifest-filen i layouten med javascript_include_tag, vil ressursrørledningen se etter alle filene som er oppført i Ressursbanen. Legg merke til hvordan vi krever kalender. Denne filen bor i app/assets/javascripts/calendar.js, men vi angav bare navnet og ikke hele banen. Asset Pipeline vil søke alle de konfigurerte banene for en fil med navnet vi oppgav.

Nå som vi løste spørsmålet om oppdagbarhet, la oss snakke om sammenkobling. Som vi diskuterte tidligere, ønsker vi ikke å laste våre filer i nettleseren en etter en. Det er bedre å utføre en nedlasting enn en haug med små nedlastinger fra nettleseren vår. Manifest-filene vi konfigurerer I Rails, vil automatisk sammenkoble filene som er oppført i dem, til en fil i produksjon. Dette er kanskje ikke det beste alternativet når vi utvikler vår søknad siden det kan gjøre feilsøking vanskelig. Imidlertid Vil Rails faktisk betjene hver fil separat nar vi kjorer i utviklingsmodus. Du trenger ikke å gjøre noe.

til Slutt vil sprocket-direktivene som driver våre aktiva manifester, bli dekket i detalj senere.

Forbehandling

å kunne kombinere filer og laste dem fra et sett med forhåndsdefinerte steder i applikasjonen vår, er en stor fordel med Ressursrørledningen. Det er bare begynnelsen. Fordi vi laster eiendeler gjennom Rails, kan vi preprocessere filene ved hjelp av populære språk som SCSS for å skrive bedre CSS og Coffeescript for renere JS. Hvis du gjør en ressurs som heter tema.css.scss, du forteller asset pipeline å kjøre filen gjennom SCSS preprosessor før servering tema.css til nettleseren. DEN SCSS preprosessor kompilerer filen TIL CSS. Det eneste vi måtte gjøre var å gi riktig filtype, .scss, til filen og asset pipeline vet å kjøre den gjennom SCSS preprosessor.

Fingeravtrykk

den siste fordelen vi skal snakke om Er Fingeravtrykk, men først la oss snakke om problemet det hjelper oss med å løse. Når vi serverer filer til nettleseren, vil de sannsynligvis bli bufret for å unngå å laste dem ned igjen i fremtiden. Hva er caching du kanskje spør?

Caching noe betyr å holde en kopi av en tidkrevende operasjon lokalt, slik at du ikke trenger å gjenta den dyre operasjonen igjen hvis inngangene og utgangene skal være nøyaktig det samme. Cacher er vanligvis viktige verdi butikker, hvor verdien er svaret på den dyre operasjonen, og nøkkelen er noe som er unikt for det elementet. Hvis du ber om en side fra serveren og deretter ber om samme side fra serveren igjen, er den raskeste måten å få den forespørselen oppfylt, å faktisk beholde en kopi av det du fikk sist gang lokalt. Nettlesere cache mange av svarene de får til forespørsler de har gjort ved hjelp av overskrifter som blir sendt med svaret. Overskriftene forteller nettleseren hvor lenge siden forblir ‘frisk’ før den utløper.’Når siden er utløpt, vil nettleseren gjøre en ny forespørsel om siden for å oppdatere sin cache. Vi sier at den raskeste forespørselen er forespørselen som ikke er gjort. Det er også ofte sagt at cache invalidation er en av de to vanskelige problemene i datavitenskap, så tenk nøye når du begynner å caching ting! Caching sparer båndbredde for oss og gir en fartsøkning for brukeren. Dette er flott til du endrer filen, og du vil at alle brukerne skal få den nye i stedet for den gamle versjonen de har lagret i nettleserens cache. Men hvordan lar vi nettleseren vite at vi har endret filen? Hvis den nye versjonen har samme navn som den gamle versjonen, vil nettleseren fortsette å bruke den gamle filen fra hurtigbufferen. Vi trenger en måte å endre filnavnet når innholdet endres slik at nettlesere ikke vil fortsette å betjene den gamle filen.

Fra Rails Guides Primer

«Fingeravtrykk er en teknikk som gjør navnet på et filnavn avhengig av innholdet i filen. Når filinnholdet endres, endres også filnavnet. For innhold som er statisk eller sjelden endres, gir dette en enkel måte å fortelle om to versjoner av en fil er identiske, selv på tvers av forskjellige servere eller distribusjonsdatoer.

NÅR et filnavn er unikt og basert på innholdet, KAN HTTP-overskrifter settes til å oppmuntre cacher overalt (enten På Cdn-Er, På Internett-Leverandører, i nettverksutstyr eller i nettlesere) for å beholde sin egen kopi av innholdet. Når innholdet er oppdatert, vil fingeravtrykket endres. Dette vil føre til at eksterne klienter ber om en ny kopi av innholdet. Dette er kjent som cache busting.

teknikken tannhjul bruker for fingeravtrykk er å legge til en hash av innholdet til slutten av filnavnet. Ta for eksempel EN CSS-fil som heter global.css. Tannhjul vil legge til hash 908e25f4bf641868d8683022a5b62f54 til slutten av filnavnet som så:

global-908e25f4bf641868d8683022a5b62f54.css

Hvis du tilfeldigvis bruker en eldre versjon Av Rails (Rails 2.x), strategien pleide å være å legge til en datobasert spørringsstreng til alle aktiva som er koblet til en innebygd hjelper. Dette så ut som så:

global.css?1309495796

spørringsstrengstrategien har flere ulemper:

  • Ikke alle cacher vil pålitelig cache innhold der filnavnet bare varierer med spørringsparametere.
    • Steve Souders anbefaler » unngå en querystring for cacheable ressurser.»5-20% av dine forespørsler vil ikke bli bufret. Spesielt spørringsstrenger virker ikke i det hele tatt med Noen Cdn – er for cache-ugyldiggjøring.
  • filnavnet kan endres mellom noder i multi-server miljøer.
    • standard spørringsstreng i Rails 2.x er basert på modifikasjonstiden til filene. Når ressurser distribueres til en klynge, er det ingen garanti for at tidsstemplene blir de samme, noe som resulterer i at forskjellige verdier blir brukt avhengig av hvilken server som håndterer forespørselen.
  • For mye cache invalidation.
    • når statiske ressurser distribueres med hver ny utgave av kode, endres mtime (tidspunktet for siste endring) av alle disse filene, og tvinger alle eksterne klienter til å hente dem igjen, selv om innholdet i disse ressursene ikke er endret.

Fingerprinting løser alle disse problemene ved å sikre at filnavn er konsistente basert på innholdet.

Fingeravtrykk er aktivert som standard for produksjon og deaktivert for alle andre miljøer. Du kan aktivere eller deaktivere den i konfigurasjonen din via alternativet config.assets.digest.»

Konklusjon

Asset Pipeline er definitivt mer komplisert enn bare å betjene eiendeler fra en offentlig mappe, og det kan være vanskelig å feilsøke. Lære å bruke det vil lønne seg i det lange løp ved å spare oss tid og hodepine. Bare tenk på alle problemene det løser for oss.

  1. Ressursbaner
  2. Manifester Og Sammenkobling
  3. Forbehandling
  4. Fingeravtrykk

Endelig, sjekk ut keynoten der DHH introduserer ressursrørledningen.