Wat schudt boom? En waarom is het belangrijk voor de prestaties van uw web?

Het web wordt langzaam geladen als een schildpad die kruipt? Problemen die alle webmensen moeten tegenkomen

Heb je ooit het gevoel gehad dat de website die we van plan zijn het goed te doen, zowel mooi als compleet? Maar als het tijd is om het daadwerkelijk te gebruiken, is "langzaam" frustrerend? Klanten zijn binnengekomen en moeten lang wachten voordat de website klaar is. Veel mensen kunnen het niet verdragen. Druk op voordat we onze producten of diensten zien, zelfs de schokkende statistieken zijn slechts enkele seconden om het web te downloaden, het kan ertoe leiden dat het bouncepercentage (klikpercentage) stijgt en de conversieratio daalt. Dit is een echt probleem dat niet wordt veroorzaakt door onaantrekkelijke ontwerpen, maar het is de "prestaties" van de website die u waarschuwt.

‍

Prompt: de afbeelding van de gebruiker toont een geïrriteerde uitdrukking tijdens het staren naar het computerscherm of mobiel. Die een wijnlaadsymbool heeft, brengt het gevoel van wachten op de downloadwebsite over

Waarom is het web langzaam? De bron uit de code die niet wordt gebruikt (maar moet nog steeds downloaden)

In het tijdperk van meer complexe websites gebruiken we de neiging om bibliotheek of frameworks te gebruiken om het gemakkelijker en sneller te maken, zoals React, Vue of zelfs het toevoegen van plug -in in ons systeem. Deze tools worden vaak geleverd met een grote hoeveelheid JavaScript -code, maar het probleem staat op een webpagina. We mogen slechts 10-20% van de gehele code die importeert, maar de browser van de gebruiker moet de "hele" code downloaden die we niet gebruiken. Het maken van de JavaScript -bestandsgrootte (bundelgrootte) groter dan nodig zoals we een grote pizza bestelden, maar slechts één stuk de rest moest het ook terug naar huis dragen. Dit is de belangrijkste reden dat uw website "vet" en "langzaam" zonder het te weten.

‍

Prompt: infographic afbeeldingen vergelijken twee bomen. Eén boom heeft een complete tak. (In plaats van alle code in de bibliotheek) en een andere boom heeft alleen de benodigde takken en heeft een weelderig blad. (In plaats van de daadwerkelijke actieve code) met een pijl die van de eerste boom naar de tweede boom wijst met de boodschap "ongebruikte code" werd gedood.

Laat de "Fat" -website blijven gebeuren?

Met ongebruikte code op de website is er veel ergere impact dan ik denk. Het is niet alleen een kwestie van langzame gevoelens. Maar het heeft direct invloed op uw bedrijf en uw SEO -rang:

• Core Web Vitals -druppels: de website die veel JavaScript laadt, zal de werking van de browser blokkeren, waardoor de LCP (de grootste contentful verf) en Inp (interactief naar de volgende verf) erger wordt, die Google als een belangrijke factor in de rangorde gebruikt.
• SEO Ranking: wanneer de slechte vitalen, Google zal zien dat uw website slechte ervaringen biedt voor gebruikers. En kan uw rang er gemakkelijk mee eens zijn
• Gebruikers ontsnappen: niemand houdt ervan te wachten. Als uw website traag is, zal de gebruiker drukken om te sluiten en sneller concurrenten op internet te vinden.
• De conversieratio daalde: toen de gebruiker aan alle gelegenheid voor u ontsnapte om het publiek te veranderen in een klant (conversie) is bijna nul.

Met andere woorden, je website laten hebben "vet" overtollig van de code die niet wordt gebruikt. Het is alsof je je eigen zakelijke kansen vernietigt. De renderblokkeerbronnen is iets dat niet over het hoofd moet worden gezien.

‍

Prompt: 3 Grafiekafbeeldingen die negatieve resultaten tonen: 1 'SEO Ranking', de 2e bar, 'gebruikersfrustatie' stijgt, de 3e 'conversieratio' sanitair met een gemakkelijk pictogram -tot -begrijpen.

"Tree Shaking", de held die zal helpen de overtollige code te snijden.

Het is de held van dit evenement. ** Wat schudt boom? ** Het gemakkelijkste antwoord is dat het het proces is "Dead Code Salad (dode code) links". Stel je de boom voor die we "schudden" om de bladeren droog te maken. De doden vielen. Door alleen takken en bladeren die nog steeds fris en sterk zijn in de wereld van het schrijven van codes, is het schudden van boom, is het proces dat Bundler (de tools die verschillende codebestanden combineren, zoals Webpack of Rollup), onze code, beide project, analyseren. Zoek dan naar `` functie ', `variabele' of 'module` Wat zijn we` `import sdpo, maar wordt nooit in gebruik uitgevoerd? "Alleen de code achterlaten die echt nodig is, waardoor de website aanzienlijk wordt gedownload

‍

Prompt: animatie of infographic afbeelding toont het proces: 1. Grote doos heeft veel code. (Zowel gebruikt als ongebruikt) stroom in de machine met de naam "boomschuddende bundler". 2. Sommige code is gescheiden in de prullenbak. 3. Het resultaat is een kleine doos. Met alleen noodzakelijke code

Voorbeelden van het echte ding: verminder de bestandsgrootte 70%. Gebruik gewoon schudden met boom.

Laten we zeggen dat er een ontwikkelingsbedrijf voor webtoepassingen is voor projectmanagement. In het begin was hun app -werk erg traag vanwege het gebruik van een grote UI -bibliotheek, maar slechts een paar component gebruikt het ontwikkelingsteam, ontdekten dat het belangrijkste JavaScript -bestand 1,5 MB is, wat te groot is. Na het controleren van het bouwproces, ontdekten ze dat het schudden van de boom niet correct werd geactiveerd in de ontwikkelde modus.

Het team heeft de instellingen op de webpack verbeterd om correct te werken wanneer de build voor de productie. Het resultaat is het schudden van boom. Kan de component analyseren en knippen die niet enorm wordt gebruikt. De uiteindelijke grootte van het JavaScript -bestand wordt teruggebracht van 1,5 MB tot slechts 450 kb of ** teruggebracht tot bijna 70%! ** De website is meer dan 2 seconden gedownload. De gebruikerservaring verbeterde ook. Dit is de kracht van "vet snijden" voor uw code.

‍

Prompt: duidelijk voor/na: 'vóór', een grafiek van 1,5 MB bestandsgrootte en heeft een langzame downloadpagina. 'Na' is een grafiek met een grootte van 450 kb en heeft dezelfde webpagina die klaar is met het downloaden met de glimlachen van gebruikers.

Wil je boom schudden, hoe te beginnen? (Checklist voor ontwikkelaars)

Voor ontwikkelaars die er zeker van willen zijn dat uw project volledig nuttig is door het schudden van bomen. Dit is een eenvoudige checklist die u onmiddellijk kunt volgen:

• Gebruik de ES2015-module-syntaxis (`` Import` en `export ': de client-side.
• Stel uw bundler correct in: voor de webpack stelt u alleen `modus: 'productie' '' set het automatisch schudden van boom en andere optimaliseren in.
• Wees voorzichtig met de bijwerkingen: in het bestand van uw 'JSON's pakket.json, probeer te zoeken naar belangrijke' side -oefeffecten ': false' om de bundler te vertellen ', de code in dit pakket heeft geen bijwerkingen die de import niet kunnen verminderen. " Die de terugkeer efficiënter zal helpen om efficiënter te werken.
• Bekijk de resultaten: gebruik tools zoals `Webpack-Bundle-Analyzer 'om te zien in uw laatste bundelbestand. Is er een onnodige code? Het zal u helpen het algemene beeld te zien en een punt te vinden dat moet worden verbeterd.

De verbetering van de prestaties is niet alleen het schudden van de boom. Andere technieken zoals eilandarchitectuur of lettertypelaststrategie zijn ook iets dat u moet bestuderen.

‍

Prompt: Checklist -afbeeldingen met elk pictogram: JavaScript ES6 -pictogram, configuratiepictogram, bijwerkingen en pictogrammen analyseren om het gemakkelijk te begrijpen en kan worden gebruikt.

Vragen die mensen zich vaak afvragen over het schudden van boom

Kan het schudden van bomen worden gebruikt met CSS?
Oké! Er zijn tools zoals Purgecss die op dezelfde manier werken. Het zal uw HTML- en JavaScript -bestanden scannen om te zien welke klassennaam is gebruikt. Het zal de CSS verwijderen die niet uit het uiteindelijke bestand worden gebruikt. Helpt om de CSS -bestandsgrootte efficiënt te verminderen

Hoe is het schudden van de boom anders dan de Minife?
Het verschil is duidelijk. Minificatie is om onnodige tekens uit de code te verwijderen, zoals gaten, nieuwe regels of het verkorten van de variabele naam. Maar alle code (logica) is nog steeds voltooid. Het schudden van de boom is "de hele blog verwijderen" die geen nut heeft. Beide technieken worden vaak samen gebruikt om de kleinste bestanden te krijgen.

Moet je elke keer alleen boom schudden?
Geen behoefte. In de meeste gevallen zal het moderne raamwerk (zoals Next.js, React App, Vue CLI) de Bundler (Webpack) automatisch instellen. Wanneer u de bouwmodus bestelt, is het onze plicht om de code te schrijven om vriendelijk te zijn.

Als mijn code bijwerkingen heeft, wat gebeurt er dan?
Bijwerkingen is een code die iets zodra import wordt gedaan (zoals het bewerken van het globale object of het toevoegen van CSS aan DOM), waardoor boomschudden die code niet durven te snijden vanwege angst dat het programma zal breken. Als het nodig is om een bestand met een bijwerking te hebben, moet de waarde worden beperkt tot `pakket.json` is" sideEfeffecten ": [" ./path/to/your/file.js "]` `om Bundler te vertellen en dat bestand niet te knippen.

‍

Prompt: de grote Q & A-pictogramafbeelding met vragen-2-3 belangrijke antwoorden worden uitgevoerd rond het spraakbubbelindeling dat gemakkelijk te lezen is.

Samenvatting: snijd het vet naar de beste prestaties.

Op dit moment begrijpt iedereen waarschijnlijk wat ** bomen schudden is ** en waarom is het een krachtig en onmisbaar hulpmiddel bij de ontwikkeling van moderne websites? Het is een automatisch proces dat "ijzervet" of onnodige code van ons project helpt. Maakt de website kleiner, laadt sneller en biedt een goede ervaring voor gebruikers en direct met de SEO -rang

Laat de code die niet wordt gebruikt om de prestaties van uw website te houden niet. Laten we teruggaan en vandaag nog je bouwproces controleren dat de held met de naam "Tree Shaking" al is geopend. Zal op de lange termijn zeker een enorme beloning geven

En als u een expert nodig hebt om uw website-artiest te upgraden, of het nu gaat om code-splitsing, optimalisatie of complexe ontwikkeling, is ons team klaar om advies te geven, Advanced WebFlow Development Service kan u helpen de snelste en sterkste website te creëren.

‍

Prompt: Krachtige samenvatting: De raketten stijgen in de lucht. Het woord "webprestaties" is aan de raket gehecht. Onder het schild wordt "boomschudden" geschreven om de ongebruikte code te voorkomen.

‍