Mikä on omaisuuserän putkisto

BY admin
|

tavoitteet

  1. ymmärrä omaisuuserän putkiston 4 pääpiirrettä.
  2. tunnista Omaisuuseräpolut
  3. tiedä, miten Omaisuuseräluettelot tarjoavat css: n ja JS: n yhteisvaikutuksen.
  4. käytä esikäsittelykieliä, kuten SASS tai CoffeeScript
  5. Define Asset Fingerprinting

Outline

pitkään käsittelimme JavaScriptiä ja CSS: ää jälkiharkintana verkkosovellusten kehittämisessä. Kaikki meidän asset koodi-asioita, kuten kuvia, tyylisivut, ja JavaScript — säilytettiin massiivinen kansio nimeltään public ja palveli ulkopuolella yhteydessä meidän Rails sovellus. Verkon kehittyessä siinä ei ollut enää järkeä.

the asset pipeline on Rails-vastaus tyylisivujen, Javascriptien ja kuvien hallintaan.

Omaisuuspolut

monet tiedostot menevät verkkosovellusten luomiseen. Pelkästään CSS-ja JavaScript-tiedostoja voi olla vaikea järjestää. Mitä kansioita luomme? Mitkä tiedostot menevät minne? Omaisuusputki tarjoaa ratkaisun tähän ongelmaan. Meidän täytyy pitää asiat hyvin järjestetty sovelluksessamme, mutta pitämällä erillisiä tiedostoja ja kansioita kunkin käsitteen tai koodin yksikkö, meillä on 2 ongelmia.

  1. mistä kiskot tietävät, missä asiat ovat? Onko kalenteri JS-tiedosto app/assets/javascripts/calendar.js vai vendor/javascripts/calendar.js?
  2. emme halua palvella jokaista tiedostoa erikseen, koska tämä tekee sivumme latautumisesta hyvin hidasta. On järkevää, että säilytämme erillisiä pieniä tiedostoja luettavuuden ja organisaation, mutta, selaimen, mieluummin murskata kaikki pienet tiedostot yhdessä ja lataa 1 JS-tiedosto ja 1 CSS-tiedosto. Tätä prosessia kutsutaan yhteenliittymäksi.

puhutaan ensimmäisestä ongelmastamme: miten kiskot tietävät, mistä etsiä? Hyödykeputkessa on tämän käsittelyä varten konsepti, jota kutsutaan Hyödykepoluiksi. Aivan kuten Bash, jossa meillä on polku ympäristömuuttuja, joka on yhdistelmä kansion polkuja, Omaisuuspolku on yhdistelmä kansion polkuja Rails etsiä varoja. Katsotaanpa katsomaan esimerkki siitä, miten meidän Omaisuuspolku on määritetty.

Rails.application.config.assets.paths =>

jos laitamme omaisuuserän johonkin näistä kansioista, Voimme käyttää niitä hakemuksessamme olevan URL-osoitteen ”/assets ” kautta. Jos sinulla on muita kansioita Rails etsiä, voit lisätä kansiot omaisuuserän polku. Näin tehdään tiedostossa config/initializers/assets.rb.

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

voimme sijoittaa varoja mihin tahansa, määrittää Omaisuuspolkumme ja käyttää niitä yhden ”/assets ” – URL-osoitteen kautta.

manifestations and Concatenation

nyt kun voimme laittaa tiedostoja minne tahansa, miten saamme ne sisällytettyä verkkosivuillemme? Asset Pipeline käyttää manifest-tiedostoa kertoakseen Rails mitä ladata. Tämä manifest-tiedosto on keskeinen sijainti, jossa voimme luetella kaikki CSS-ja JS-tiedostot, joita sovelluksemme tarvitsee. Tämä ei ole ominaisuus JS tai CSS vaan asset pipeline. Tässä on esimerkki siitä, miltä JS manifest-tiedostomme näyttää:

File: app/assets/javascripts / application.js

//= require jquery//= require calendar

kun lisäät manifest-tiedoston layoutiin javascript_include_tag, asset pipeline etsii kaikki Omaisuuseräpolussa luetellut tiedostot. Huomaa, miten tarvitsemme kalenteria. Tämä tiedosto elää app/assets/javascripts/calendar.js, mutta määritimme vain nimen emmekä koko polkua. Asset Pipeline etsii kaikista määritetyistä poluista tiedoston, jolla on antamamme nimi.

nyt kun selvitimme löydettävyyttä koskevan kysymyksen, puhutaan konsatenaatiosta. Kuten keskustelimme aiemmin, emme halua ladata tiedostojamme selaimessa yksi kerrallaan. On parempi suorittaa yksi lataus kuin joukko pieniä Latauksia selaimestamme. Railsissa määrittämämme manifest-tiedostot yhdistävät automaattisesti niissä luetellut tiedostot yhdeksi tiedostoksi tuotannossa. Tämä ei ehkä ole paras vaihtoehto, kun kehitämme sovellustamme, koska se voi tehdä vianetsinnästä vaikeaa. Kuitenkin, Rails todella palvella jokaisen tiedoston erikseen, kun olemme käynnissä kehitys tilassa. Ei tarvitse tehdä mitään.

lopuksi, ketjupyörä direktiivit, jotka valtuuttavat omaisuusluettelomme, käsitellään yksityiskohtaisesti myöhemmin.

esikäsittely

se, että voimme yhdistää tiedostoja ja ladata ne sovelluksessamme ennalta määritellyistä paikoista, on suuri etu Asset Pipeline-hankkeessa. Se on vasta alkua. Koska olemme lastaus varat kautta kiskot, voimme esikäsitellä tiedostoja käyttämällä suosittuja kieliä, kuten SCSS kirjoittaa paremmin CSS ja Coffeescript cleaner JS. Jos teet voimavara nimetty teema.css.scss, kerrot asset pipeline ajaa tiedoston läpi SCSS esiprosessori ennen tarjoilua teema.css selaimeen. SCSS-esiprosessori kokoaa tiedoston CSS: ään. Ainoa asia, mitä meidän piti tehdä, oli antaa oikea tiedostopääte, .scss, tiedostolle ja asset pipeline osaa ajaa sen SCSS-esiprosessorin kautta.

sormenjälkien ottaminen

viimeinen hyöty, josta puhumme, on sormenjälkien ottaminen, mutta puhutaan ensin ongelmasta, jonka se auttaa meitä ratkaisemaan. Kun palvelemme tiedostoja selaimeen,ne todennäköisesti tallennetaan välimuistiin, jotta niitä ei enää jatkossa ladata. Mitä välimuistia voisit kysyä?

jonkin välimuistiin tallentaminen tarkoittaa sitä, että aikaa vievästä operaatiosta pidetään kopio paikallisesti, jotta kallista operaatiota ei tarvitse tehdä uudelleen, jos tulot ja lähdöt aikovat olla täsmälleen samat. Kätköt ovat yleensä avainarvokauppoja, joissa arvo on vastaus kalliiseen operaatioon ja avain on jotain, joka on ainutlaatuinen kyseiselle esineelle. Jos pyydät sivun palvelimelta ja pyydät sitten saman sivun palvelimelta uudelleen, nopein tapa saada pyyntö täyttymään on todella säilyttää kopio siitä, mitä sait viimeksi paikallisesti. Selaimet välimuistiin paljon vastauksia he saavat pyyntöihin he ovat tehneet käyttämällä otsikot, jotka saavat lähetetään vastauksen. Otsakkeet kertovat selaimelle, kuinka kauan sivu pysyy ’tuoreena’ennen kuin se’ vanhenee.”Kun sivu on vanhentunut, selain tekee uuden pyynnön sivun päivittämiseksi välimuistiin. Sanomme, että nopein pyyntö on pyyntö, jota ei esitetä. Usein sanotaan myös, että välimuistin mitätöinti on yksi tietojenkäsittelytieteen kahdesta vaikeasta ongelmasta, joten mieti tarkkaan, kun aloitat välimuistin tallentamisen! Välimuistin tallentaminen säästää meille kaistanleveyttä ja antaa käyttäjälle nopeuden lisäyksen. Tämä on hienoa, kunnes muutat tiedostoa ja haluat kaikkien käyttäjien saavan uuden sijaan vanhan version, jonka he ovat tallentaneet selaimen välimuistiin. Mutta miten kerromme selaimelle, että olemme muokanneet tiedostoa? Jos uudella versiolla on sama nimi kuin vanhalla versiolla, selain jatkaa vanhan tiedoston käyttämistä välimuististaan. Tarvitsemme tavan muuttaa tiedostonimi, kun sisältö muuttuu, jotta selaimet eivät jatka vanhan tiedoston palvelemista.

Rails Guides Primer

”Fingerprinting on tekniikka, joka tekee tiedostonimen nimen riippuvaiseksi tiedoston sisällöstä. Kun tiedoston sisältö muuttuu, myös tiedostonimi muuttuu. Jos Sisältö on staattista tai muuttuu harvoin, tämä tarjoaa helpon tavan kertoa, ovatko tiedoston kaksi versiota identtisiä, jopa eri palvelimilla tai käyttöönottopäivillä.

kun tiedostonimi on yksilöllinen ja perustuu sen sisältöön, HTTP-otsikot voidaan asettaa kannustamaan välimuisteja kaikkialla (CDNs: llä, ISP: llä, verkkolaitteissa tai verkkoselaimissa) säilyttämään oma kopio sisällöstä. Kun sisältöä päivitetään, sormenjälki muuttuu. Tämä saa etäasiakkaat pyytämään uutta kopiota sisällöstä. Tätä kutsutaan välimuistin murtamiseksi.

ketjupyörät käyttävät sormenjälkien ottamiseen tekniikkaa, jossa sisällön hash liitetään tiedostonimen loppuun. Otetaan esimerkiksi CSS-tiedosto global.css. Ketjupyörät lisäävät hash 908e25f4bf641868d8683022a5b62f54 tiedostonimen loppuun näin:

global-908e25f4bf641868d8683022a5b62f54.css

jos satut käyttämään vanhempaa versiota Rails (Rails 2.x), strategia käytetään olla liittää päivämäärä-pohjainen kyselymerkkijono jokaiseen voimavara liittyy sisäänrakennettu auttaja. Tämä näytti siltä:

global.css?1309495796

kyselymerkkistrategialla on useita haittoja:

  • kaikki välimuistit eivät tallenna luotettavasti sisältöä, jossa tiedostonimi vaihtelee vain kyselyparametrien mukaan.
    • Steve Souders suosittelee ” välttäen hakusanojen käyttöä.”5-20% pyynnöistänne ei tallenneta välimuistiin. Erityisesti kyselymerkkijonot eivät toimi lainkaan joidenkin välimuistin mitätöintiin tarkoitettujen CDNs: ien kanssa.
  • tiedoston nimi voi muuttua solmujen välillä monipalvelinympäristöissä.
    • Oletuskyselymerkkijono Rails 2: ssa.x perustuu tiedostojen muutosaikaan. Kun varat lähetetään klusteriin, ei ole takeita siitä, että aikaleimat ovat samat, jolloin käytetään erilaisia arvoja riippuen siitä, mikä palvelin käsittelee pyynnön.
  • liikaa välimuistin mitätöintiä.
    • kun staattiset omaisuuserät otetaan käyttöön jokaisen uuden koodin julkaisun yhteydessä, kaikkien näiden tiedostojen m-aika (viimeisen muutoksen aika) muuttuu pakottaen kaikki etäasiakkaat hakemaan ne uudelleen, vaikka kyseisten omaisuuserien sisältö ei olisikaan muuttunut.

sormenjäljet korjaa kaikki nämä ongelmat varmistamalla, että tiedostonimet ovat johdonmukaisia niiden sisällön perusteella.

sormenjälkien ottaminen on oletusarvoisesti käytössä tuotannossa ja poissa käytöstä kaikissa muissa ympäristöissä. Voit ottaa sen käyttöön tai poistaa sen käytöstä asetuksissasi valitsemalla config.assets.digest.”

Conclusion

The Asset Pipeline is definitely more complete then just serving assets from a public folder and it can be hard to debug. Sen käytön oppiminen maksaa pitkällä aikavälillä säästämällä aikaa ja päänsärkyä. Ajattele kaikkia ongelmia, jotka se ratkaisee meille.

  1. Omaisuuspolut
  2. manifestit ja Koekuvaukset
  3. esikäsittely
  4. sormenjälkien ottaminen

lopuksi kannattaa ehdottomasti tarkistaa keynote, jossa DHH esittelee omaisuusputken.