Co je to třesení stromů? A proč je to důležité pro výkon vašeho webu?

Web se načítá pomalu jako želva? Problémy, s nimiž se všichni weboví lidé musí setkat

Už jste někdy cítili, že web, který máme v úmyslu dělat dobře, krásné i kompletní? Ale když je čas to skutečně použít, je „pomalý“ frustrující? Zákazníci přišli a musí čekat dlouho, než bude web dokončen. Mnoho lidí to nemůže nést. Než uvidíte naše produkty nebo služby, i když šokující statistika je jen několik sekund, aby si stáhl web, může to způsobit zvýšení míry okamžitého opuštění (míra kliknutí) a míra konverze klesne. Jedná se o skutečný problém, který není způsoben neatraktivními vzory, ale varuje vás „výkon“ webu.

‍

Výzva: Obrázek uživatele zobrazuje podrážděný výraz a zároveň zírá na obrazovku počítače nebo mobilu. Který má symbol načítání vína, přináší pocit čekání na webové stránky ke stažení

Proč je web pomalý? Zdroj z kódu, který se nepoužívá (ale stále si musí stáhnout)

Ve věku složitějších webových stránek máme tendenci používat knihovnu nebo rámce, které pomáhají usnadnit a zrychlit, jako je React, Vue nebo dokonce přidání pluginu do našeho systému. Tyto nástroje často přicházejí s velkým množstvím kódu JavaScript, ale problém je na webové stránce. Můžeme zavolat pouze 10-20% celého kódu, který importuje, ale prohlížeč uživatele si musí stáhnout „celý“ kód, který nepoužíváme. Vytváření velikosti souboru JavaScriptu (velikost svazku), než je nutné, jako jsme si objednali velkou pizzu, ale jen jeden kus musel ji také přenést domů. To je hlavní důvod, proč váš web „tuk“ a „pomalý“, aniž by to věděl.

‍

Výzva: Infographic obrázky porovnejí dva stromy. Jeden strom má kompletní větev. (Místo všech kódů v knihovně) a další strom má pouze potřebné větve a má svěží list. (Místo skutečného aktivního kódu) se šipkou směřujícím z prvního stromu na druhý strom se zprávou „nevyužitý kód“ byla zabita.

Nechte nadále k „tlustému“ webu?

Po nevyužitém kódu na webu je mnohem horší dopad, než si myslím. Nejde jen o pomalé pocity. Ale přímo to ovlivňuje vaše podnikání a vaše hodnocení SEO:

• Core Web Vitals Drops: Web, který načte mnoho JavaScript, bude blokovat provoz prohlížeče, díky čemuž bude LCP (největší obsahová barva) a INP (interaktivní k další barvě) horší, který Google používá jako důležitý faktor v žebříčku.
• SEO hodnocení: Když špatné vitality, Google uvidí, že váš web poskytuje uživatelům špatné zkušenosti. A může vaše pozice snadno souhlasit
• Uživatelé Escape: Nikdo nemá rád čekání. Pokud je váš web pomalý, uživatel stiskne, aby zavřel a najde konkurenty na webu rychleji.
• Míra konverze se snížila: Když uživatel unikl veškeré příležitosti pro změnu publika na zákazníka (konverze) je téměř nula.

Jinými slovy, nechat váš web přebytek „tuk“ z kódu, který se nepoužívá. Je to jako zničit své vlastní obchodní příležitosti. Zdroje blokování vykreslování je něco, co by nemělo být přehlíženo.

‍

Výzva: 3 obrázky grafů ukazující negativní výsledky: 1 'SEO ROZKUME', 2. lišta, „User Frustation“ stoupá, 3. „konverzní rychlost“ instalatérství pomocí ikony Easy -to -Understand.

"Třání stromů", hrdina, který pomůže snížit přebytečný kód.

Je to hrdina této události. ** Co je to třesení stromů? ** Nejjednodušší odpověď je, že je to proces „Dead Code Salad (Dead Code) vlevo“. Představte si strom, který „třeseme“, aby listy vyschly. Mrtví padli. Ponechání pouze poboček a listů, které jsou ve světě psaní kódu stále čerstvé a silné, je třepání stromů proces, který Bundler (nástroje, které kombinují různé soubory kódu, jako je Webpack nebo Rollup), analyzuje náš kód, oba projekt. Pak vyhledejte `` funkci`, `variabilitu`, or` modul` Co jsme` `import SDPO, ale nikdy se nepoužívá? „Ponechání pouze kódu, který je skutečně nezbytný, což způsobuje významné stažení webu

‍

Výzva: Animace nebo infographic obrázek ukazuje proces: 1. Velká pole má hodně kódu. (Použité i nevyužité) proudí do stroje s názvem „Trys -Thaking Bundler“. 2. určitý kód byl rozdělen do koše. 3. výsledkem je malá krabice. S pouze nezbytným kódem

Příklady ze skutečné věci: Snižte velikost souboru 70%. Stačí použít třepání stromů.

Řekněme, že existuje společnost pro vývoj webových aplikací pro řízení projektů. Jejich práce byla zpočátku velmi pomalá kvůli použití velké knihovny UI, ale pouze několik komponent používá vývojový tým, zjistila, že hlavní soubor JavaScript je 1,5 MB, což je příliš velké. Po kontrole procesu sestavení zjistili, že otřes stromů nebylo ve vyvinutém režimu správně aktivováno.

Tým vylepšil nastavení na webu, aby fungovalo správně, když se sestavení pro výrobu. Výsledkem je třesení stromů. Může analyzovat a snížit komponentu, která se nepoužívá obrovská. Konečná velikost souboru JavaScript je snížena z 1,5 MB na pouze 450 kB nebo ** sníženo na téměř 70%! ** Web byl stažen více než 2 sekundy. Uživatelské zkušenosti se také zlepšily. Toto je síla „řezání tuků“ pro váš kód.

‍

Výzva: Jasně před/po: „před“, graf velikosti souboru 1,5 MB a má stránku s pomalým stahováním. „After“ je graf zobrazující velikost souboru 450 kB a má stejnou webovou stránku, která je dokončena stahování s úsměvy uživatelů.

Chcete se třesení stromů, jak začít? (Kontrolní seznam pro vývojáře)

Pro vývojáře, kteří si chtějí být jisti, že váš projekt je plně užitečný při třepání stromů. Toto je jednoduchý kontrolní seznam, který můžete okamžitě sledovat:

• Použijte syntaxi modulu ES2015 (`` Import` a „Export`: Ohňování stromů se spoléhá na statickou analýzu, která nejlépe funguje s` import import/export (modul ES), takže se vyhněte použití ComMANJS v kódech na straně klienta. MDN Web Docs.
• Nastavte svůj Bundler správně: Pro webpack stačí nastavit „režim:„ Produkce “„ automaticky umožní otřes stromů a další optimalizovat.
• Dávejte pozor na vedlejší účinky: V souboru vašeho balíčku 'JSON.JSON se pokuste vyhledat klíčové „Sideeffects“: False`, abyste vyprávěli Bundlerovi, „kód v tomto balíčku nemá vedlejší účinky, které nemohou omezit import.“ Což pomůže efektivněji návratu do práce.
• Podívejte se na výsledky: Použijte nástroje jako „Webpack-Bundle-Analyzer“ a zobrazte ve svém posledním souboru svazku. Existuje zbytečný kód? Pomůže vám vidět celkový obrázek a najít bod, který je třeba vylepšit.

Zlepšení výkonu není jen třesení stromů. Jiné techniky, jako je ostrovní architektura nebo strategie nakládání písma, měli byste také studovat.

‍

Výzva: Obrázky kontrolního seznamu s každou ikonou: ikona JavaScript ES6, ikona konfigurace, vedlejší efekty a analyzujte ikony tak, aby bylo snadné srozumitelný a lze je použít.

Otázky, které lidé mají tendenci přemýšlet o třepání stromů

Lze třepání stromů použít s CSS?
Dobře! Existují nástroje, jako je Purgecss, které fungují podobně. Skenejte vaše soubory HTML a JavaScript a zjistí, který název třídy byl použit. Odstraní CSS, který se nepoužívá z konečného souboru. Pomáhá efektivně zmenšit velikost souboru CSS

Jak se třese strom se liší od minife?
Rozdíl je jasný. Minifikace je odstranit zbytečné znaky z kódu, jako jsou mezery, nové řádky nebo zkrácení názvu proměnné. Ale veškerý kód (logika) je stále kompletní. Chvění stromu „odstraňuje celý blog“, který nemá k ničemu. Obě techniky se často používají společně k získání nejmenších souborů.

Musíte se pokaždé chvějí strom?
Není potřeba. Ve většině případů moderní rámec (jako je Next.js, Create React App, Vue CLI) automaticky nastaví Bundler (WebPack). Když objednáváte sestavení ve výrobním režimu, naší povinností je napsat kód tak, aby byl přátelský.

Pokud má můj kód vedlejší účinky, co se stane?
Vedlejší efekt je kód, který něco dělá, jakmile se importuje (například úpravy globálního objektu nebo přidání CSS do DOM), což může způsobit, že se otřesení stromů neodváží snížit tento kód kvůli strachu, že se program zlomí. Pokud je nutné mít soubor s vedlejším účinkem, měla by být hodnota omezena na `Package.json` je„ sideeffects “: [" ./path/to/your/file.js "]` `, aby sdělil Bundler a tento soubor neřezal.

‍

Výzva: Velký obrázek ikony Q&A s otázkami-2-3 Důležité odpovědi jsou prováděny kolem formátu bublin řeči, který je snadno čitelný.

Shrnutí: Vyřešte tuk na nejlepší výkon.

V tuto chvíli každý pravděpodobně chápe, co je ** třesení stromů ** a proč je to mocný a nepostradatelný nástroj ve vývoji moderních webových stránek? Jedná se o automatický proces, který pomáhá z našeho projektu „Iron Fat“ nebo zbytečný kód. Dělá web menší, načítá se rychleji a poskytuje dobrý zážitek pro uživatele a přímo s Rank SEO

Nedovolte, aby kód, který se nepoužívá k držení výkonu vašeho webu. Vraťme se a zkontrolujme dnes proces sestavení, že hrdina s názvem „Shaking Tree“ je již otevřen. Určitě dá obrovskou odměnu z dlouhodobého hlediska

A pokud potřebujete odborníka, aby upgradoval umělce vašeho webu, ať už provádí dělení, optimalizace nebo komplexní vývoj, náš tým je připraven poskytovat radu, pokročilá vývojová služba WebFlow vám může pomoci vytvořit nejrychlejší a nejsilnější web.

‍

Výzva: Silné shrnutí: Rakety stoupají na oblohu. Slovo „Web Performance“ je připojeno k raketě. Pod štít je napsán „třesení stromů“, aby se zabránilo nevyužitému kódu.

‍