რა არის code splitting და tree shaking?

Question

IT Interview Practice · Accepted Answer

ორივე ამცირებს JavaScript-ს, რომელსაც მომხმარებლები ჩამოტვირთავენ. Code splitting ანაწევრებს bundle-ს chunk-ებად, რომლებიც საჭიროებისამებრ იტვირთება; tree shaking შლის კოდს, რომელსაც არასდროს იყენებ. ისინი ერთმანეთს ავსებენ: გაყავი, რა იტვირთება, ჩამოაბერტყე მკვდარი კოდი თითოეულ chunk-ში.

Code splitting

ერთი დიდი bundle-ის ნაცვლად, აპლიკაცია იყოფა ისე, რომ თითოეული route ან მძიმე ფუნქცია ცალკე chunk-ია, რომელიც მხოლოდ საჭიროებისას იტვირთება:

js

## Code splitting

ერთი დიდი bundle-ის ნაცვლად, აპლიკაცია იყოფა ისე, რომ თითოეული route ან მძიმე ფუნქცია ცალკე chunk-ია, რომელიც მხოლოდ საჭიროებისას იტვირთება:

```js
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk

// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetched on click
  openEditor();
};
```

დინამიური `import()` არის სიგნალი — bundler ცალკე ფაილს გამოსცემს იმ საზღვართან.

## Tree shaking

bundler სტატიკურად აანალიზებს ES module `import`/`export`-ს და აგდებს export-ებს, რომლებზეც არაფერი მიმართავს. ის მუშაობს მხოლოდ **ESM**-თან (სტატიკური, ანალიზებადი) — არა CommonJS `require`-თან:

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

ის ეყრდნობა `"sideEffects": false`-ს `package.json`-ში და თითო-ფუნქციურ იმპორტებს; barrel ფაილებმა ან side-effect-იანმა მოდულებმა შეიძლება ის დაამარცხონ.

## კომპრომისები

- ზედმეტი გაყოფა → ბევრი პაწაწინა request და waterfall-ები; დააჯგუფე დაკავშირებული კოდი.
- Tree shaking მყიფეა — არასწორად მონიშნული side effect ინახავს მკვდარ კოდს.

## რატომ არის ეს მნიშვნელოვანი

ეს არის ორი ბერკეტი „ნაკლები JS-ის გაგზავნის“ უკან. ინტერვიუერებს სურთ იცოდე, რომ code splitting წყვეტს *რა იტვირთება როდის*, tree shaking წყვეტს *რა შედის მასში საერთოდ* და რომ tree shaking დამოკიდებულია სტატიკურ ESM-ზე — დეტალი, რომელიც გამოარჩევს ადამიანებს, რომლებმაც ნამდვილად დაარეგულირეს bundle, მათგან, ვინც მხოლოდ წაიკითხა მის შესახებ.

Code splitting

Tree shaking

კომპრომისები

რატომ არის ეს მნიშვნელოვანი

დაკავშირებული კითხვები