Co je to potrubí aktiv

BY admin
|

cíle

  1. pochopte 4 hlavní rysy potrubí aktiv.
  2. Identifikujte cesty aktiv
  3. zjistěte, jak Manifesty aktiv poskytují zřetězení CSS a JS.
  4. Použití předzpracování jazyků, jako SASS nebo CoffeeScript
  5. Definovat Aktiv snímání Otisků prstů

Osnova

Po dlouhou dobu, jsme se chovali JavaScript a CSS jako nápad při vývoji webových aplikací. Všechny naše aktiva kód — věci jako obrázky, styly, Javascripty — byla držena v masivní složku s názvem public a sloužil mimo kontext našich Rails aplikace. Jak se web vyvíjel, to už nedávalo smysl.

asset pipeline je Rails odpovědí na správu stylů, Javascriptů a obrázků.

cesty aktiv

mnoho souborů jde do vytváření webových aplikací. Samotné soubory CSS a JavaScript mohou být obtížné organizovat. Jaké složky vytvoříme? Které složky jdou kam? Ropovod aktiv poskytuje odpověď na tento problém. V naší aplikaci musíme udržovat věci velmi organizované, ale udržováním samostatných souborů a složek pro každý koncept nebo jednotku kódu máme 2 problémy.

  1. jak Rails vědět, kde jsou věci? Je soubor kalendáře JS v app/assets/javascripts/calendar.js nebo vendor/javascripts/calendar.js?
  2. Nechceme obsluhovat každý soubor zvlášť, protože to způsobí, že se naše stránka načítá velmi pomalu. To dává smysl pro nás, pro udržení samostatné malé soubory, pro čitelnost a organizace, ale pro prohlížeč, raději bychom rozbít všechny ty malé soubory dohromady a zatížení 1 JS souboru a 1 CSS soubor. Tento proces se nazývá zřetězení.

promluvme si o našem prvním problému: jak ví Rails, kde hledat? Ropovod aktiv má koncept nazvaný cesty aktiv pro řešení tohoto problému. Stejně jako v BASH, kde máme proměnnou prostředí cesty, která je kombinací cest složek, cesta aktiva je kombinací cest složek pro kolejnice, ve kterých lze hledat aktiva. Podívejme se na příklad toho, jak je naše cesta aktiv nakonfigurována.

Rails.application.config.assets.paths =>

pokud vložíme aktivum do některé z těchto složek, můžeme k nim přistupovat prostřednictvím adresy URL „/ aktiva “ v naší aplikaci. Pokud máte k vyhledávání další složky pro Rails, můžete je přidat do cesty k aktivům. To se provádí v souboru config/initializers/assets.rb.

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

můžeme dát aktiva kamkoli, nakonfigurovat naši cestu k aktivům a přistupovat k nim pomocí jediné adresy URL‘ / assets‘.

manifesty a zřetězení

Nyní, když můžeme soubory umístit kamkoli, jak je dostaneme na naše webové stránky? Potrubí aktiv používá soubor manifestu, aby řekl kolejnicím, co mají načíst. Tento soubor manifestu je centrální umístění, kde můžeme uvést všechny soubory CSS a JS, které naše aplikace potřebuje. Toto není funkce JS nebo CSS, ale spíše potrubí aktiv. Zde je příklad toho, jak vypadá náš soubor manifestu JS:

soubor: app / assets/javascripts / application.js

//= require jquery//= require calendar

když zahrnete soubor manifestu do rozvržení pomocí javascript_include_tag, potrubí aktiv vyhledá všechny soubory uvedené v cestě aktiv. Všimněte si, jak požadujeme kalendář. Tento soubor žije v app/assets/javascripts/calendar.js, přesto jsme zadali pouze název a ne úplnou cestu. Potrubí Asset prohledá všechny nakonfigurované cesty pro soubor s názvem, který jsme zadali.

Nyní, když jsme vyřešili otázku objevitelnosti, promluvme si o zřetězení. Jak jsme diskutovali dříve, Nechceme načítat naše soubory do prohlížeče jeden po druhém. Je lepší provést jedno stahování než spoustu malých stahování z našeho prohlížeče. Soubory manifestu, které konfigurujeme v Rails, automaticky spojí soubory v nich uvedené do jednoho souboru ve výrobě. To nemusí být nejlepší volbou, když vyvíjíme naši aplikaci, protože to může ztěžovat ladění. Nicméně, Rails bude ve skutečnosti sloužit každý soubor zvlášť, když jsme běží ve vývojovém režimu. Není třeba nic dělat.

konečně, směrnice řetězového kola, které napájejí naše manifesty aktiv, budou podrobně popsány později.

Předzpracování

Být schopen kombinovat soubory a načíst z sada předdefinovaných místech v naší aplikaci je velkou výhodou Aktiv Potrubí. To je jen začátek. Protože načítáme aktiva přes kolejnice, můžeme soubory předzpracovat pomocí populárních jazyků, jako je SCSS, pro psaní lepších CSS a Coffeescript pro cleaner JS. Pokud uděláte aktivum s názvem Téma.element.scss, říkáte potrubí aktiv spustit soubor přes preprocesor SCSS před podáním motivu.css do prohlížeče. Preprocesor SCSS kompiluje soubor do CSS. Jediné, co jsme museli udělat, bylo poskytnout správnou příponou, .scss, do souboru a asset pipeline ví, spustit to přes SCSS preprocessor.

otisky prstů

poslední výhodou, o které budeme hovořit, je otisky prstů, ale nejprve si promluvme o problému, který nám pomáhá vyřešit. Když podáváme soubory do prohlížeče, je pravděpodobné, že budou uloženy do mezipaměti, aby se v budoucnu znovu nestáhly. Co je ukládání do mezipaměti, můžete se zeptat?

ukládání do Mezipaměti něco znamená udržovat kopii časově náročné operace lokálně, takže nemusíte předělat drahé operaci znovu, kdyby vstupy a výstupy jsou přesně stejné. Mezipaměti jsou obvykle obchody s klíčovými hodnotami, kde hodnota je odpovědí na nákladnou operaci a klíč je něco, co je pro tuto položku jedinečné. Pokud požádáte o stránku ze serveru a poté znovu požádáte o stejnou stránku ze serveru, nejrychlejším způsobem, jak tuto žádost splnit, je skutečně uchovat kopii toho, co jste naposledy dostali lokálně. Prohlížeče ukládají do mezipaměti spoustu odpovědí, které dostanou na požadavky, které podaly, pomocí záhlaví, která jsou odeslána s odpovědí. Záhlaví říkají prohlížeči, Jak dlouho stránka zůstane „čerstvá“, než vyprší její platnost.’Jakmile stránka vypršela, prohlížeč podá nový požadavek, aby stránka obnovila mezipaměť. Říkáme, že nejrychlejší požadavek je požadavek, který není podán. Často se také říká, že zneplatnění mezipaměti je jedním ze dvou těžkých problémů v informatice, takže si pečlivě promyslete, když začnete ukládat do mezipaměti věci! Ukládání do mezipaměti šetří šířku pásma pro nás a poskytuje zvýšení rychlosti pro uživatele. To je skvělé, dokud nezměníte soubor a chcete, aby všichni vaši uživatelé dostali nový místo staré verze, kterou uložili do mezipaměti prohlížeče. Ale jak dáme prohlížeči vědět, že jsme soubor upravili? Pokud má nová verze stejný název jako stará verze, prohlížeč bude pokračovat v používání starého souboru ze své mezipaměti. Potřebujeme způsob, jak změnit název souboru, když se změní obsah, takže prohlížeče nebudou nadále sloužit starému souboru.

From the Rails Guides Primer

“ Fingerprinting je technika, která činí název souboru závislý na obsahu souboru. Když se změní obsah souboru, změní se také název souboru. Pro obsah, který je statický nebo zřídka změněn, to poskytuje snadný způsob, jak zjistit, zda jsou dvě verze souboru identické, a to i na různých serverech nebo datech nasazení.

Když název souboru je jedinečný a na základě jeho obsahu, záhlaví HTTP lze nastavit tak, aby povzbudit keší všude (ať už v Cdn, na Isp, u síťových zařízení, nebo ve webovém prohlížeči), aby se jejich vlastní kopii obsahu. Po aktualizaci obsahu se otisk prstu změní. To způsobí, že vzdálení klienti požádají o novou kopii obsahu. Toto je známé jako cache mlátit.

technika řetězová kola používá pro otisky prstů je připojit hash obsahu na konec názvu souboru. Vezměte například soubor CSS s názvem global.css. Řetězová kola přidá hash 908e25f4bf641868d8683022a5b62f54 na konec názvu souboru takto:

global-908e25f4bf641868d8683022a5b62f54.css

pokud náhodou používáte starší verzi Rails (Rails 2.x), strategie bývala připojit řetězec dotazu založený na datech ke každému aktivu spojenému s vestavěným pomocníkem. To vypadá jako tak:

global.css?1309495796

řetězec dotazu strategie má několik nevýhod:

  • Ne všechny cache budou spolehlivě cache obsahu, kam názvem jen se liší tím, že parametry dotazu.
    • Steve Souders doporučuje “ vyhnout se querystring pro cacheable zdrojů.“5-20% vašich požadavků nebude uloženo do mezipaměti. Řetězce dotazů zejména nefungují vůbec s některými CDN pro zneplatnění mezipaměti.
  • název souboru se může měnit mezi uzly v prostředích pro více serverů.
    • výchozí řetězec dotazu v Rails 2.x je založen na době modifikace souborů. Když jsou aktiva nasazena do clusteru, neexistuje žádná záruka, že časová razítka budou stejná, což má za následek použití různých hodnot v závislosti na tom, který server zpracovává požadavek.
  • příliš mnoho zneplatnění mezipaměti.
    • Při statické aktiva jsou rozmístěny s každou novou verzí kódu, mtime (čas poslední modifikace), všechny tyto soubory, změny, nutí všechny vzdálené klienty, aby pro ně znovu, i když obsah těchto aktiv se nezměnil.

Fingerprinting řeší všechny tyto problémy tím, že zajistí, že názvy souborů jsou konzistentní na základě jejich obsahu.

otisky prstů jsou ve výchozím nastavení povoleny pro výrobu a zakázány pro všechna ostatní prostředí. Můžete jej povolit nebo zakázat v konfiguraci pomocí možnosti config.assets.digest.“

závěr

potrubí aktiv je rozhodně složitější, než jen obsluhovat aktiva z veřejné složky a může být obtížné jej ladit. Naučit se, jak ji používat, se z dlouhodobého hlediska vyplatí tím, že nám ušetříte čas a bolesti hlavy. Jen přemýšlejte o všech problémech, které pro nás řeší.

  1. Aktiv Cesty
  2. Projevuje a Zřetězení
  3. Předzpracování
  4. snímání Otisků prstů

Konečně, určitě se podívejte na keynote, kde DHH zavádí aktiv potrubí.