Tree shaking müasir veb-hazırlamada yekun JavaScript paketindən istifadə olunmayan kodun silinməsi prosesini təsvir etmək üçün istifadə olunan texniki termindir. O, tətbiq daxilində heç vaxt istinad edilməyən və ya icra olunmayan kodu müəyyən etmək üçün ES modul sintaksisinə, xüsusən də import və export operatorlarına əsaslanır. Layihənizin asılılıq qrafikini təhlil etməkklə, quraşdırma alətləri fayllar serverə yerləşdirilməzdən əvvəl bu ölü kodu təhlükəsiz şəkildə silə bilər ki, bu da son istifadəçi üçün daha kiçik fayl ölçüləri və daha sürətli yüklənmə vaxtları ilə nəticələnir.
Tree shaking pərdə arxasında necə işləyir?
Özündə tree shaking statik asılılıq ağacı qurmaqla işləyir. ES modullarından istifadə etdikdə, fayllar arasındakı əlaqələr açıq şəkildə göstərilir. Bu import və export əməliyyatları statik olduğundan, Webpack və ya Rollup kimi paketləyici modulun hansı hissələrinin həqiqətən tələb olunduğunu təhlil edə bilər. Əgər tərtibatçı kitabxananı import edirsə, lakin onun on ixrac olunan funksiyasından yalnız birindən istifadə edirsə, tree shaking prosesi digər doqquz funksiyanın heç vaxt çağırılmadığını müəyyən edir. Daha sonra quraşdırma aləti bu istifadə olunmayan blokları yekun nəticədən kənarlaşdıraraq, yekun icraya töhfə verməyən kod ağacının budaqlarını effektiv şəkildə təmizləyir.
Niyə bu proses üçün ES modul sintaksisi tələb olunur?
Tree shaking ES modullarının deterministik təbiətindən asılıdır. Dinamik olan və işləmə vaxtı qiymətləndirilməsinə əsaslanan CommonJS kimi köhnə modul sistemlərindən fərqli olaraq, ES modulları statikdir. Bu o deməkdir ki, import və export bəyanatları kodun yuxarı səviyyəsində görünməlidir və işləmə vaxtında şərti və ya hesablanmış ola bilməz. Struktur sabit olduğundan, paketləyicilər JavaScript kodunu işə salmağa ehtiyac duymadan hansı kod yollarından istifadə olunacağını etibarlı şəkildə proqnozlaşdıra bilərlər. Bu statik təhlil tərtibatçılara qurulma mərhələsində istifadə olunmayan kodu avtomatik olaraq təmizləməyə imkan verən təməldir.
Qaçınılmalı olan ümumi səhvlər hansılardır?
Proses avtomatik görünsə də, bir neçə ümumi kodlaşdırma vərdişi tree shaking-in effektiv işləməsinə mane ola bilər. Əgər kodunuz qlobal obyektlərin və ya protokol xassələrinin dəyişdirilməsi kimi əlavə təsirlərdən (side effects) istifadə edirsə, paketləyici adətən kodun istifadə olunmadığı görünsə belə, tətbiqin sıradan çıxmasının qarşısını almaq üçün saxlanılmalı olduğunu güman edəcək. Üstəlik, qovluqdakı hər şeyi ixrac edən barrel fayllarının istifadəsi bəzən paketləyiciləri ehtiyac duyulduğundan daha çoxunu import etməyə vadar edə bilər. Təmiz paketləri saxlamaq üçün ixraclarınızı açıq saxlayın və qlobal miqyasın çirklənməsindən çəkinin.
Modul sistemlərinin müqayisəsi
| Sistem Növü | Tree Shaking Dəstəyi | Təhlil Metodu |
|---|---|---|
| ES Modulları | Tam Dəstək | Statik Təhlil |
| CommonJS | Dəstək Yoxdur | Dinamik İşləmə Vaxtı |
| AMD | Məhdud | İşləmə Vaxtının Qiymətləndirilməsi |
Layihədə tree shaking tətbiq etmək üçün addımlar
Layihənizin kodun silinməsi üçün optimallaşdırıldığından əmin olmaq üçün qurulma konfiqurasiyanız zamanı sistemli yanaşmanı izləyin. package.json faylınızı və paketləyici parametrlərinizi yoxlamaqla başlayın, sonra transpilatorunuzun paketləyiciyə onları təhlil etmək şansı verməzdən əvvəl ES modullarını köhnə formalara çevirmədiyinə əmin olun.
- Bütün layihə fayllarında yalnız ES modul sintaksisindən (import/export) istifadə edin.
- modules: false təyin etməklə Babel kimi transpilatorunuzu ES modullarını toxunulmaz saxlamaq üçün konfiqurasiya edin.
- Paketləyiciyə hansı faylların təmizlənməsinin təhlükəsiz olduğunu bildirmək üçün package.json faylınıza sideEffects bayrağını daxil etdiyinizə əmin olun.
- Əksər paketləyicilər tree shaking-i xüsusi olaraq yalnız sıxılmış istehsal yığmaları üçün aktivləşdirdikləri üçün quruluşunuzu istehsal rejimində işlədin.
- İstifadə olunmayan asılılıqların silindiyini yoxlamaq üçün Webpack Bundle Analyzer kimi alətlərdən istifadə edərək yekun paketinizi yoxlayın.
Alien Road tree shaking-i necə tətbiq edir
Adi layihədə Alien Road müştərilərimiz üçün standart performans optimallaşdırma auditinin bir hissəsi olaraq tree shaking-i inteqrasiya edir. Şişmiş üçüncü tərəf kitabxanalarının səbəb olduğu potensial maneələri müəyyən etmək üçün müştəri layihəsinin qurulma prosesini nəzərdən keçirməklə başlayırıq. Əgər mağaza yalnız bir funksiya tələb olunduğu halda bütün ümumi kitabxanaları import edirsə, biz importları xüsusi funksiyalara yönəltmək üçün yenidən qururuq. Bu proses çox vaxt ümumi paket ölçüsünü əhəmiyyətli dərəcədə azaldır ki, bu da birbaşa səhifə sürəti göstəricilərinə təsir edir. Daha sonra müştəri komandasının gələcək funksiya yerləşdirmələrində bu standartları qoruya bilməsi üçün bu dəyişiklikləri performans hesabatlarımızda sənədləşdiririk.
Təmiz kodu saxlamaq üçün ən yaxşı təcrübələr
- Böyük monolit obyektlər əvəzinə funksiyaları ayrıca ixrac edən modul kitabxanalara üstünlük verin.
- Gərəksiz asılılıq zəncirlərinə səbəb olurlarsa, barrel fayllarından (hər şeyi ixrac edən index.js faylları) istifadə etməyin.
- Kitabxana yeniləmələrinin gözlənilməz əlavə təsirlərə səbəb olmadığını yoxlamaq üçün paketlərinizi tez-tez sınayın.
- Qurğuşun alətləriniz üçün statik təhlili asanlaşdırmaq üçün asılılıq ağacınızı dayaz saxlayın.
- Ölü kodu vurğulayan IDE linters-dən istifadə edərək istifadə olunmayan importları mütəmadi olaraq təmizləyin.
Bu həftə haradan başlamaq lazımdır
Cari layihənizin paket ölçüsünü yoxlamaqla başlayın. Əgər paketləyicidən istifadə edirsinizsə, qurulma nəticənizin vizual hesabatını yaradın. Tanımadığınız və ya istifadə etmədiyiniz kitabxana kodunu ehtiva edən böyük hissələri axtarın. Bunları müəyyən etdikdən sonra xüsusi komponentlər əvəzinə bütün kitabxananı import edib-etmədiyinizi yoxlayın. Çox vaxt sadəcə import { X } from ‘library’ olan tək import bəyanatını import X from ‘library/X’ olaraq dəyişdirmək dərhal nəticə verə bilər. Bu kiçik dəyişiklik bu həftə tətbiqinizin çatdırılma performansını optimallaşdırmağa başlamaq üçün əla bir üsuldur.
Tez-tez Verilən Suallar
Tree shaking bütün JavaScript kitabxanaları ilə işləyirmi?
Tree shaking ES modul sintaksisindən istifadə etməklə yazılmış kitabxana ilə ən yaxşı şəkildə işləyir. Əgər kitabxana CommonJS kimi köhnə formatlardan istifadə etməklə dərc olunubsa, paketləyici istifadə olunmayan kodu aradan qaldırmaq üçün statik təhlil edə bilməz. Layihə asılılıqlarınıza əlavə etməzdən əvvəl həmişə kitabxananın tree shaking-i dəstəklədiyini və ya modula xas giriş nöqtəsi təklif etdiyini görmək üçün kitabxana sənədlərini yoxlayın.
Niyə kodum tree shaking-dən sonra hələ də böyük görünür?
Paketiniz böyük olaraq qalırsa, kodunuzda bölmələrin silinməsinin qarşısını alan əlavə təsirlər ola bilər. Bundan əlavə, import etdiyiniz kitabxana tree shaking-ə uyğun olmaya bilər. Siz həmçinin transpilatorunuzun kodu paketləyicidən strukturu gizlədən, tələb olunan təhlili yerinə yetirməsinə mane olan saxlama formatına çevirmədiyini yoxlamalısınız.
Paketləyici olmadan tree shaking istifadə edə bilərəmmi?
Tree shaking qurulma mərhələsində paketləyicilər tərəfindən həyata keçirilən prosesdir. Baxmayaraq ki, brauzerlər artıq ES modullarını yerli olaraq dəstəkləyir, onlar kodunuzu optimallaşdırmaq üçün tree shaking həyata keçirmirlər. Ölü kodun silinməsindən faydalanmaq üçün yerləşdirmədən əvvəl asılılıq qrafikinizi təhlil etmək və daha kiçik istehsala hazı fayl yaratmaq üçün Webpack, Rollup və ya Vite kimi quruluş alətindən istifadə etməlisiniz.
Bu kontekstdə əlavə təsirlər (side effects) nələrdir?
Əlavə təsirlər qlobal pəncərə obyektinin dəyişdirilməsi və ya mövcud prototiplərə üsulların əlavə edilməsi kimi kod özünün dərhal əhatə dairəsindən kənarda məntiqi yerinə yetirdikdə baş verir. Bu əməliyyatlar tətbiqin vəziyyətini dəyişdirdiyindən, paketləyicilər həmin kodu zəruri hesab edir və tree shaking zamanı onu silməyəcək. Kodunuzu package.json-da əlavə təsirlərdən azad kimi bəyan etmək alətə daha yaxşı optimallaşdırmağa kömək edir.
Oxumağa davam edin: Veb Dizayn və Hazırlanması · Veb Dizayn