Mi az eszköz csővezeték

BY admin
|

célok

  1. értse meg az eszközvezeték 4 fő jellemzőjét.
  2. azonosítsa az Eszközútvonalakat
  3. Tudja meg, hogy az Eszköznyilvántartások Hogyan biztosítják a CSS és a JS összefűzését.
  4. használjon előfeldolgozó nyelveket, mint a SASS vagy a CoffeeScript
  5. eszköz ujjlenyomat meghatározása

vázlat

hosszú ideig a JavaScript-et és a CSS-t utógondolatként kezeltük a webes alkalmazások fejlesztése során. Minden eszközkódunkat-például képeket, stíluslapokat és JavaScripteket — egy public nevű hatalmas mappában tároltuk, és a Rails alkalmazás kontextusán kívül szolgáltuk fel. Ahogy a web fejlődött, ennek már nem volt értelme.

az eszközfolyamat a stíluslapok, JavaScriptek és képek kezelésére szolgáló Rails válasz.

Eszközútvonalak

sok fájl megy létre webes alkalmazások. A CSS és a JavaScript fájlok önmagukban nehezen rendezhetők. Milyen mappákat hozunk létre? Mely fájlok hova kerülnek? Az Eszközvezeték választ ad erre a problémára. Meg kell tartani a dolgokat nagyon szervezett a mi alkalmazás, de azáltal, hogy külön fájlokat és mappákat minden koncepció vagy egység kód, van 2 probléma.

  1. Honnan tudja a Rails, hogy hol vannak a dolgok? A naptár js fájlja app/assets/javascripts/calendar.js vagy vendor/javascripts/calendar.js?
  2. nem szeretnénk minden fájlt külön kiszolgálni, mivel ez nagyon lassúvá teszi az oldal betöltését. Van értelme számunkra, hogy külön kis fájlokat tartsunk fenn az olvashatóság és a szervezés érdekében, de a böngésző számára inkább összetörjük ezeket a kis fájlokat, és betöltünk 1 JS fájlt és 1 CSS fájlt. Ezt a folyamatot összefűzésnek nevezik.

beszéljünk az első problémánkról: honnan tudja a Rails, hol kell keresni? Az Eszközvezeték rendelkezik egy Eszközútvonalaknak nevezett koncepcióval ennek kezelésére. Csakúgy, mint a BASH-ban, ahol van egy PATH környezeti változó, amely a mappaútvonalak kombinációja, az Eszközútvonal a sínek mappaútjainak kombinációja az eszközök kereséséhez. Vessünk egy példát arra, hogyan van konfigurálva az Eszközútvonalunk.

Rails.application.config.assets.paths =>

ha egy eszközt ezen mappák bármelyikébe helyezünk, akkor az alkalmazásunk ‘/assets’ URL-jén keresztül érhetjük el őket. Ha további mappái vannak a Rails számára a kereséshez, hozzáadhatja a mappákat az eszköz elérési útjához. Ez a config/initializers/assets.rb fájlban történik.

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

az eszközöket bárhová elhelyezhetjük, konfigurálhatjuk az eszköz elérési útját, és egyetlen ‘/eszközök’ URL-en keresztül elérhetjük őket.

manifesztek és Összefűzések

most, hogy bárhova elhelyezhetjük a fájlokat, hogyan tudjuk elérni, hogy azok szerepeljenek a weboldalainkon? Az Eszközfolyamat jegyzékfájlt használ a Rails számára, hogy megmondja, mit kell betölteni. Ez a manifest fájl egy központi hely, ahol felsorolhatjuk az összes CSS és JS fájlt, amelyre alkalmazásunknak szüksége van. Ez nem a JS vagy a CSS jellemzője, hanem az eszközvezeték. Íme egy példa arra, hogy néz ki a JS manifest fájlunk:

File: app/assets/javascripts/application.js

//= require jquery//= require calendar

amikor a jegyzékfájlt az elrendezésbe a javascript_include_tag – vel együtt veszi fel, az eszközfolyamat megkeresi az eszköz elérési útjában felsorolt összes fájlt. Figyeljük meg, hogyan van szükség naptár. Ez a fájl app/assets/javascripts/calendar.js – ben él, mégis csak a nevet adtuk meg, a teljes elérési utat nem. Az Eszközfolyamat az összes konfigurált útvonalon megkeresi az általunk megadott nevű fájlt.

most, hogy megoldottuk a felfedezhetőség kérdését, beszéljünk az összefűzésről. Mint korábban megbeszéltük, nem akarjuk egyenként betölteni fájljainkat a böngészőbe. Jobb, ha egy letöltést hajt végre, mint egy csomó kis letöltést a böngészőnkből. A Rails-ben konfigurált manifest fájlok automatikusan összefűzik a bennük felsorolt fájlokat egy fájlba a gyártás során. Lehet, hogy ez nem a legjobb megoldás az alkalmazás fejlesztésekor, mivel ez megnehezítheti a hibakeresést. A Rails azonban minden fájlt külön fog kiszolgálni, amikor fejlesztési módban futunk. Nem kell semmit tennie.

végül, a lánckerék irányelveket, amelyek az eszköz manifesztjeinket táplálják, később részletesen ismertetjük.

előfeldolgozás

a fájlok kombinálása és betöltése az alkalmazásunk előre meghatározott helyeiről nagy előnye az Eszközvezetéknek. Ez csak a kezdet. Mivel az eszközöket Rails-en keresztül töltjük be, előfeldolgozhatjuk a fájlokat olyan népszerű nyelvekkel, mint az SCSS a jobb CSS írásához és a CoffeeScript a tisztább JS-hez. Ha egy eszköz nevű téma.css.scss, azt mondja az eszközfolyamatnak, hogy futtassa a fájlt az SCSS előfeldolgozón keresztül a téma kiszolgálása előtt.css a böngészőhöz. Az SCSS előfeldolgozó lefordítja a fájlt CSS-be. Az egyetlen dolog, amit meg kellett tennünk, az volt, hogy megadjuk a megfelelő fájlkiterjesztést, .scss, a fájlhoz, és az eszközfolyamat tudja, hogy az SCSS előfeldolgozón keresztül futtassa.

ujjlenyomat

az utolsó előny, amelyről beszélni fogunk, az ujjlenyomat, de először beszéljünk arról a problémáról, amely segít megoldani. Amikor fájlokat szolgáltatunk a böngészőnek, valószínűleg gyorsítótárba kerülnek, hogy elkerüljék a jövőben történő újbóli letöltést. Mi a gyorsítótár lehet kérni?

valami gyorsítótárazása azt jelenti, hogy egy időigényes művelet másolatát helyben kell tartani, hogy ne kelljen újra elvégeznie a drága műveletet, ha a bemenetek és kimenetek pontosan ugyanazok lesznek. A gyorsítótárak általában kulcsérték-tárolók, ahol az érték a válasz a drága műveletre, a kulcs pedig az adott elemre jellemző. Ha egy oldalt kér a kiszolgálótól, majd újra kéri ugyanazt az oldalt a kiszolgálótól, akkor a kérés teljesítésének leggyorsabb módja az, ha ténylegesen megőrzi annak másolatát, amit legutóbb helyben kapott. A böngészők sok olyan választ gyorsítótáraznak, amelyeket a válaszokkal elküldött fejlécek használatával kapnak. A fejlécek megmondják a böngészőnek, hogy az oldal mennyi ideig marad friss, mielőtt lejár.’Miután az oldal lejárt, a böngésző új kérelmet nyújt be az oldal gyorsítótárának frissítésére. Azt mondjuk, hogy a leggyorsabb kérés az a kérés, amelyet nem tettek meg. Azt is gyakran mondják, hogy a gyorsítótár érvénytelenítése a számítástechnika két nehéz problémájának egyike, ezért alaposan gondolja át, amikor elkezdi gyorsítótárazni a dolgokat! A gyorsítótárazás sávszélességet takarít meg számunkra, és sebességnövelést biztosít a felhasználó számára. Ez nagyszerű, amíg meg nem változtatja a fájlt, és azt szeretné, hogy minden felhasználó megkapja az újat a böngésző gyorsítótárában tárolt régi verzió helyett. De hogyan értesíthetjük a böngészőt, hogy módosítottuk a fájlt? Ha az új verzió neve megegyezik a régi verzióval, akkor a böngésző továbbra is a régi fájlt használja a gyorsítótárból. Szükségünk van egy módra a fájlnév megváltoztatására, amikor a tartalom megváltozik, hogy a böngészők ne szolgálják tovább a régi fájlt.

From the Rails Guides Primer

“az ujjlenyomat olyan technika, amely a fájlnév nevét a fájl tartalmától függ. Amikor a fájl tartalma megváltozik, a fájlnév is megváltozik. Statikus vagy ritkán módosított tartalom esetén ez egyszerű módja annak megállapítására, hogy a fájl két verziója azonos-e, még a különböző kiszolgálókon vagy a telepítési dátumokon is.

ha egy fájlnév egyedi és a tartalma alapján, a HTTP fejlécek beállíthatók úgy, hogy mindenhol (akár CDN-en, akár internetszolgáltatóknál, hálózati berendezésekben vagy webböngészőkben) arra ösztönözzék a gyorsítótárakat, hogy megőrizzék a tartalom saját példányát. A tartalom frissítésekor az ujjlenyomat megváltozik. Ez arra készteti a távoli ügyfeleket, hogy a tartalom új példányát kérjék. Ez az úgynevezett cache mellszobor.

a technika lánckerék használ ujjlenyomat, hogy csatolja a hash A tartalom végén a fájl nevét. Vegyünk például egy global.css nevű CSS fájlt. Lánckerék hozzá a hash 908e25f4bf641868d8683022a5b62f54, hogy a végén a fájl nevét, mint így:

global-908e25f4bf641868d8683022a5b62f54.css

ha a Rails régebbi verzióját használja (Rails 2.x), a stratégia korábban egy dátum alapú lekérdezési karakterlánc hozzáfűzése volt minden beépített segítővel összekapcsolt eszközhöz. Ez így nézett ki:

global.css?1309495796

a lekérdezési karakterlánc-stratégiának számos hátránya van:

  • nem minden gyorsítótár képes megbízhatóan gyorsítótárazni a tartalmat, ahol a fájlnév csak lekérdezési paraméterekkel különbözik.
    • Steve Souders azt javasolja, hogy “kerülje el a gyorsítótárazható erőforrások lekérdezését.”A kérések 5-20% – a nem lesz Gyorsítótárazva. Különösen a lekérdezési karakterláncok egyáltalán nem működnek néhány CDN-vel a gyorsítótár érvénytelenítéséhez.
  • a fájlnév többkiszolgálós környezetben változhat a csomópontok között.
    • az alapértelmezett lekérdezési karakterlánc a Rails 2-ben.az x a fájlok módosítási idején alapul. Amikor az eszközöket egy fürtbe telepítik, nincs garancia arra, hogy az időbélyegzők megegyeznek, ami különböző értékeket eredményez attól függően, hogy melyik kiszolgáló kezeli a kérést.
  • túl sok gyorsítótár érvénytelenítés.
    • amikor statikus eszközöket telepítenek a kód minden új kiadásával, ezeknek a fájloknak az mtime (az utolsó módosítás ideje) megváltozik, arra kényszerítve az összes távoli klienst, hogy újra letöltse őket, még akkor is, ha az eszközök tartalma nem változott.

az ujjlenyomat megoldja ezeket a problémákat azáltal, hogy biztosítja, hogy a fájlnevek tartalmuk alapján konzisztensek legyenek.

az ujjlenyomat alapértelmezés szerint engedélyezve van a gyártásnál, és minden más környezetben le van tiltva. A config.assets.digest opcióval engedélyezheti vagy letilthatja a konfigurációban.”

következtetés

az Eszközvezeték határozottan összetettebb, mint az eszközök nyilvános mappából történő kiszolgálása, és nehéz lehet hibakeresni. A használat megtanulása hosszú távon megtérül azáltal, hogy időt és fejfájást takarít meg nekünk. Gondolj csak azokra a problémákra, amelyeket ez megold nekünk.

  1. Eszközútvonalak
  2. manifesztek és összefűzés
  3. előfeldolgozás
  4. ujjlenyomat

végül feltétlenül nézze meg a keynote-ot, ahol a DHH bemutatja az eszközfolyamatot.