Wat Is de Asset Pipeline

BY admin
|

doelstellingen

  1. begrijpen de vier belangrijkste kenmerken van de asset pipeline.
  2. Identificeer de Activapaden
  3. Know how Asset Manifests give concatenation of CSS and JS.
  4. gebruik preprocessing talen zoals SASS of CoffeeScript
  5. Define Asset Fingerprinting

Outline

gedurende lange tijd hebben we JavaScript en CSS behandeld als een bijzaak bij het ontwikkelen van webapplicaties. Al onze asset code — dingen zoals afbeeldingen, stylesheets en JavaScripts — werd bewaard in een enorme map genaamd public en buiten de context van onze Rails-applicatie geserveerd. Naarmate het web evolueerde, sloeg dat nergens meer op.

de asset pipeline is het antwoord van Rails op het beheren van stylesheets, JavaScripts en afbeeldingen.

Assetpaden

veel bestanden gaan naar het maken van webapplicaties. De CSS en JavaScript bestanden alleen kan moeilijk te organiseren zijn. Welke mappen maken we? Welke bestanden gaan waar naartoe? De Asset Pipeline biedt een antwoord op dit probleem. We moeten de dingen heel georganiseerd houden in onze applicatie, maar door aparte bestanden en mappen te houden voor elk concept of code-eenheid, hebben we 2 problemen.

  1. hoe weten Rails waar dingen zijn? Staat het JS-bestand van de agenda in app/assets/javascripts/calendar.js of vendor/javascripts/calendar.js?
  2. we willen niet elk bestand afzonderlijk serveren omdat dit onze pagina erg traag zal laden. Het is logisch voor ons om aparte kleine bestanden te onderhouden voor leesbaarheid en organisatie, maar voor de browser, we liever smash al die kleine bestanden samen en laden 1 JS-bestand en 1 CSS-bestand. Dit proces wordt aaneenschakeling genoemd.

laten we het hebben over ons eerste probleem: hoe weten Rails waar ze moeten zoeken? De Asset Pipeline heeft een concept genaamd Asset paden voor het omgaan met dit. Net als in BASH waar we een PATH omgevingsvariabele hebben die een combinatie is van mappaden, is het Assetpad een combinatie van mappaden voor Rails om naar assets te zoeken. Laten we eens kijken naar een voorbeeld van hoe ons Asset pad is geconfigureerd.

Rails.application.config.assets.paths =>

als we een asset in een van deze mappen plaatsen, kunnen we ze benaderen via de URL ‘/assets’ in onze applicatie. Als u extra mappen voor Rails hebt om te zoeken, kunt u de mappen toevoegen aan het Activapad. Dit wordt gedaan in het bestand config/initializers/assets.rb.

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

we kunnen activa overal plaatsen, ons Assetpad configureren en ze benaderen via één enkele ‘/assets’ URL.

manifesten en samenvoeging

nu We bestanden overal kunnen plaatsen, hoe krijgen we ze in onze webpagina ‘ s? De Asset Pipeline gebruikt een manifest bestand om Rails te vertellen wat te laden. Dit manifest-bestand is een centrale locatie waar we alle CSS-en JS-bestanden kunnen weergeven die onze applicatie nodig heeft. Dit is niet een functie van JS of CSS, maar eerder de asset pipeline. Hier is een voorbeeld van hoe ons js manifest bestand eruit ziet:

File: app / assets/javascripts / application.js

//= require jquery//= require calendar

wanneer u het manifest-bestand in uw opmaak opneemt met de javascript_include_tag, zal de assetpijplijn alle bestanden in het Assetpad zoeken. Merk op hoe we kalender nodig hebben. Dit bestand staat in app/assets/javascripts/calendar.js, maar we hebben alleen de naam opgegeven en niet het volledige pad. De Asset-pijplijn zal alle geconfigureerde paden doorzoeken naar een bestand met de naam die we hebben opgegeven.

nu we de vraag van de vindbaarheid hebben opgelost, laten we het hebben over aaneenschakeling. Zoals we eerder hebben besproken, willen we onze bestanden niet één voor één in de browser laden. Het is beter om een download uit te voeren dan een bos van kleine downloads vanuit onze browser. De manifest-bestanden die we in Rails configureren, zullen de bestanden die erin staan automatisch samenvoegen tot één bestand in productie. Dit is misschien niet de beste optie wanneer we onze applicatie ontwikkelen, omdat het debuggen moeilijk kan maken. Echter, Rails zal eigenlijk elk bestand afzonderlijk dienen wanneer we draaien in de ontwikkelingsmodus. Je hoeft niets te doen.

ten slotte zullen de tandwielrichtlijnen die van invloed zijn op de manifesten van onze activa later in detail worden behandeld.

voorbewerken

in staat zijn om bestanden te combineren en te laden vanaf een set van vooraf gedefinieerde locaties in onze applicatie is een groot voordeel van de Asset Pipeline. Dat is nog maar het begin. Omdat we activa via Rails laden, kunnen we de bestanden vooraf verwerken met behulp van populaire talen zoals SCSS voor het schrijven van betere CSS en Coffeescript voor cleaner JS. Als u een asset met de naam thema te maken.css.scss, je vertelt de asset pipeline om het bestand door de SCSS preprocessor te draaien voordat het thema wordt geserveerd.css naar de browser. De SCSS preprocessor compileert het bestand in CSS. Het enige wat we moesten doen was de juiste bestandsextensie, .scss, aan het bestand geven en de asset pipeline weet het door de SCSS preprocessor te laten lopen.

Fingerprinting

het laatste voordeel waar we het over zullen hebben is Fingerprinting, maar laten we eerst praten over het probleem dat het ons helpt op te lossen. Wanneer we bestanden naar de browser, ze zijn waarschijnlijk worden gecached om te voorkomen dat ze opnieuw te downloaden in de toekomst. Wat is caching je zou kunnen vragen?

iets cachen betekent een kopie van een tijdrovende operatie lokaal bewaren, zodat u de dure operatie niet opnieuw hoeft uit te voeren als de in-en uitgangen precies hetzelfde zijn. Caches zijn meestal key value stores, waar de waarde is het antwoord op de dure operatie en de sleutel is iets dat uniek is voor dat item. Als u een pagina van de server aanvraagt en vervolgens dezelfde pagina van de server opnieuw aanvraagt, is de snelste manier om aan dat verzoek te voldoen om daadwerkelijk een kopie te bewaren van wat u de laatste keer lokaal kreeg. Browsers cache veel van de reacties die ze krijgen om verzoeken die ze hebben gemaakt met behulp van de headers die krijgen verzonden met het antwoord. De headers vertellen de browser Hoe lang de pagina ‘vers’ blijft voordat het ‘ verloopt.’Zodra de pagina is verlopen, zal de browser een nieuw verzoek doen voor de pagina om zijn cache te vernieuwen. We zeggen dat het snelste verzoek het verzoek is dat niet is gedaan. Het wordt ook vaak gezegd dat cache ongeldigmaking is een van de twee moeilijke problemen in de informatica, dus denk goed na als je begint caching dingen! Caching bespaart bandbreedte voor ons en biedt een snelheid boost voor de gebruiker. Dit is geweldig totdat u het bestand te wijzigen en je wilt dat al uw gebruikers om de nieuwe in plaats van de oude versie die ze hebben opgeslagen in hun browser cache te krijgen. Maar hoe laten we de browser weten dat we het bestand hebben gewijzigd? Als de nieuwe versie dezelfde naam heeft als de oude versie, zal de browser het oude bestand uit zijn cache blijven gebruiken. We hebben een manier nodig om de bestandsnaam te veranderen wanneer de inhoud verandert, zodat browsers het oude bestand niet blijven dienen.

from the Rails Guides Primer

” Fingerprinting is een techniek die de naam van een bestandsnaam afhankelijk maakt van de inhoud van het bestand. Wanneer de inhoud van het bestand verandert, wordt ook de bestandsnaam gewijzigd. Voor inhoud die statisch is of zelden is gewijzigd, biedt dit een eenvoudige manier om te zien of twee versies van een bestand identiek zijn, zelfs op verschillende servers of implementatiedata.

wanneer een bestandsnaam uniek is en gebaseerd is op de inhoud ervan, kunnen HTTP-headers worden ingesteld om caches overal aan te moedigen (of het nu gaat om CDNs, ISP ‘ s, netwerkapparatuur of webbrowsers) om hun eigen kopie van de inhoud te bewaren. Wanneer de inhoud wordt bijgewerkt, verandert de vingerafdruk. Dit zorgt ervoor dat de externe clients om een nieuwe kopie van de inhoud vragen. Dit staat bekend als cache busting.

de techniek die sprockets gebruikt voor het nemen van vingerafdrukken is het toevoegen van een hash van de inhoud aan het einde van de bestandsnaam. Neem bijvoorbeeld een CSS-bestand met de naam global.css. Tandwielen voegt de hash 908e25f4bf641868d8683022a5b62f54 toe aan het einde van de bestandsnaam zoals dit:

global-908e25f4bf641868d8683022a5b62f54.css

als u een oudere versie van Rails gebruikt (Rails 2.x), de strategie gebruikt om een datum-gebaseerde query string toe te voegen aan elk actief gekoppeld aan een ingebouwde helper. Dit zag er zo uit.:

global.css?1309495796

de query string strategie heeft verschillende nadelen:

  • niet alle caches zullen betrouwbaar cache inhoud waar de bestandsnaam verschilt alleen door query parameters.
    • Steve Souders beveelt aan ” het vermijden van een querystring voor cacheable resources.”5-20% van uw verzoeken worden niet gecached. Query strings in het bijzonder werken helemaal niet met sommige CDN ‘ s voor cache ongeldigmaking.
  • de bestandsnaam kan veranderen tussen knooppunten in multi-server-omgevingen.
    • de standaard query-tekenreeks in Rails 2.x is gebaseerd op de wijzigingstijd van de bestanden. Wanneer activa worden geïmplementeerd in een cluster, is er geen garantie dat de tijdstempels hetzelfde zijn, waardoor verschillende waarden worden gebruikt, afhankelijk van welke server de aanvraag afhandelt.
  • te veel cache ongeldigmaking.
    • wanneer statische activa worden ingezet bij elke nieuwe release van code, verandert de mtime (tijdstip van laatste wijziging) van al deze bestanden, waardoor alle externe clients worden gedwongen ze opnieuw op te halen, zelfs als de inhoud van die activa niet is veranderd.

Fingerprinting lost al deze problemen op door ervoor te zorgen dat bestandsnamen consistent zijn op basis van hun inhoud.

Fingerprinting is standaard ingeschakeld voor productie en uitgeschakeld voor alle andere omgevingen. U kunt het in-of uitschakelen in uw configuratie via de config.assets.digest optie.”

conclusie

de Asset-pijplijn is zeker complexer dan alleen het bedienen van assets uit een publieke map en het kan moeilijk zijn om te debuggen. Leren hoe het te gebruiken zal lonend zijn op de lange termijn door ons tijd en hoofdpijn te besparen. Denk aan alle problemen die het voor ons oplost.

  1. Assetpaden
  2. manifesten en concatenatie
  3. voorbewerking
  4. Fingerprinting

ten slotte, Bekijk zeker de keynote waar DHH de asset pipeline introduceert.