Tree-shaking և Code Splitting Module System-ում

Ժամանակակից JavaScript-ում կարևոր է ստեղծել փոքր և օպտիմիզացված bundle-ներ։ Որպեսզի նախագծերդ լինեն ավելի արագ բեռնվող և արդյունավետ, օգտագործվում են երկու կարևոր տեխնիկա՝ Tree-shaking և Code Splitting։

Այս տեխնիկաները հիմնականում կիրառվում են ES Modules-ով և Module Bundler-ներով (օրինակ՝ Webpack, Rollup):

---

Ի՞նչ է Tree-shaking-ը

Tree-shaking-ը գործընթաց է, որի ընթացքում հեռացվում է ծրագրի այն կոդը, որը երբեք չի օգտագործվում (մեռած կոդ կամ dead code)։ Այսպիսով վերջնական bundle-ը դառնում է ավելի փոքր և արդյունավետ։

Օրինակ՝ եթե import արել ես միայն մի ֆունկցիա, ապա մնացած չօգտագործված ֆունկցիաները չեն ներառվի վերջնական ֆայլում։

  
// utils.js
export function sum(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}
  

  
// main.js
import { sum } from './utils.js';

console.log(sum(2, 3)); // 5
  

Եթե bundler-ը աջակցում է tree-shaking, ապա միայն sum ֆունկցիան կմնա bundle-ում, իսկ multiply ֆունկցիան կհանվի։

Tree-shaking աշխատելու պայմանները՝

• Պետք է օգտագործել ES Modules (import/export), ոչ թե CommonJS (require).
• Կոնֆիգուրացիան պետք է լինի production mode-ում՝ որպեսզի կատարվի օպտիմիզացիան։
• Կոդը պետք է լինի ստատիկ վերլուծելի՝ մոդուլների կախվածությունները պետք է հստակ լինեն:

---

Ի՞նչ է Code Splitting-ը

Code Splitting-ը տեխնիկա է, որը բաժանում է քո կոդը ավելի փոքր հատվածների (chunk-երի), որպեսզի դրանք բեռնվեն անհրաժեշտության դեպքում, այլ ոչ թե ամեն ինչ միանգամից։

Օրինակ՝ եթե ունես մեծ ծրագիր, կարող ես բեռնել միայն գլխավոր էջի կոդը, իսկ մնացած էջերի կոդը՝ միայն երբ օգտվողը այցելում է դրանք։

  
// Սովորական import
import { heavyFunction } from './heavy-module.js';

heavyFunction();
  

  
// Dynamic import Code Splitting-ի համար
async function loadHeavyFunction() {
  const { heavyFunction } = await import('./heavy-module.js');
  heavyFunction();
}

loadHeavyFunction();
  

Այս ձևով heavy-module.js-ը կբեռնվի միայն այն ժամանակ, երբ անհրաժեշտ կլինի։

Կա Code Splitting-ի երեք հիմնական տեսակ՝

• Entry Points Splitting — տարբեր մուտքային կետերի համար տարբեր bundle-ներ։
• Vendor Splitting — երրորդ կողմի գրադարանները (օրինակ՝ React, Lodash) առանձնացնել առանձին ֆայլի մեջ։
• Dynamic Import Splitting — կոդի բեռնում ըստ օգտվողի գործողության։

---

Ինչու՞ Tree-shaking և Code Splitting օգտագործել

• Անասելի փոքրացնում է bundle-ի չափը։
• Արագացնում է կայքի առաջին բեռնման ժամանակը։
• Բարելավում է օգտվողի փորձը (User Experience)։
• Օգնում է օպտիմալ օգտագործել ցանցային ռեսուրսները։

---

Եզրակացություն

Tree-shaking-ը և Code Splitting-ը դարձել են ժամանակակից Frontend զարգացման պարտադիր գործիքները։ Դրանք օգնում են ստեղծել ավելի արագ, ավելի թեթև և օգտվողի համար ավելի հաճելի վեբ ծրագրեր։ Եթե օգտագործում ես ES Modules և ճիշտ դասավորում ես քո կոդը, կարող ես լիարժեք օգտվել այս տեխնիկաներից։