?? ??? ?? ?? ??? ????? JavaScript ?? ???? ??? ??????. ??? ??????? ? ?? ??? ??? ?? ??, ?? ?? ? ??? ??? ?????. ? ?? ?? ??? ??? ????. 1. ?? ?? ??-react.lazy ? ????? ??? ?? ??? ??; 2. ?? ?? ?? ??-????? ??? ?? ? ?? ?? ??; 3. ?? ?? ??-? ? ????? ??? ?? ?????. ?? ???? Dynamic Import () ??, Webpack Bundle Analyzer? ?? ??? ?? ??, ?? ?? ??? ? ???? ?? ??? ???? ?? ???? ?????. ??? ???? ?? ?? ??? HTTP ?? ??, ?? ?? ?? ? ? ?? ????? ??? ???? ?? ????? ?????. ?? ??? ? ??? ??? ??? ????? ? ? ????? ??? ?? ? ??? ??? ?? ? ? ?? ? ??? ??????.

?? JavaScript ?? ????? ?? ? ? ??? ?????? ??? ??? ??? ?? ? ?? ? ??? ?? ?? ???. ?? ????? ????, ?? ?? ? ?? ???? JavaScript? ?? ?????. ???? ?? ??? ?? ??? ???? ?????.

?? ??? ??, ??? ?? ? ?? ??? ??? ?????? ?????.

?? ??? ???? ? ??????

???? JS ? (React, Vue ?? Angular? ?? ? ?? ? : ???? ?? ??? WebPack , Vite ?? Rollup ? ?? ??? ???? ?? ??? JavaScript ??? ??? ?????. ??? ??? ?? ???.

• ? ?? ??? ? ?? ???? ???? ? ? ??? ?????.
• ?? ????? ??? ???? ?? ?? ??????.
• ????? ?? ?????? ?? JS? ?? ???? ????????. ?? ??? (TTI)? ??? ??????.
• ?? ??? ??? ??? ??? ?????.

?? ??? ?????? ???? ?? ???? ?? ???? ??? ????? ????.

?? ????? ???? ??? ???????

?? ??? ??? ??? ?? ????? ? ??? ?? ???? ???? ?????.

??? 500kb main.js ?? ??? ?? ? ????.

• main.js (100kb) - ?? ? ??
• auth.js (50kb) - ???/?? ??
• dashboard.js (120KB) - ??? ?? ??
• vendor.js (200kb)-?? ?????

? ??? ??? ???????.

?? ?? :

• ? ?? ?? ??
• ? ?? ?? (? ??? ??? ?? ??? ????? ????)
• ?? ????? ??? ??? ???????

?? ?? ??

? ?? ?? ?? ??? ????.

1. ?? ?? ?? (?? ????)

???? ??? ??????. ???? /dashboard ? ???? ?? ?? ?? ???????.

 // react.lazy and Spensense? ?????
const dashboard = react.lazy (() => import ( './ dashboard'));

?? ? () {
  ?? (
    <???? ?? = "?? ...">
      <?? ?? />
    </????>
  );
}

????? ???? ???? ?? ??? ???? ???? ?????.

2. ?? ?? ?? ??

?? ????? ???? ?? ? ??? ?? ?? (? : ??, ??)? ??????.

 const imageEditor = react.lazy (() => import ( './ imageEditor'));

??? ???? ??? UI ?? ??? ?????.

3. ?? ?? ??

? ??? ??? ?? ????? ( lodash , moment , axios )? ??? ??????.

?? ?? ?? ??? ? ?? ????? ????? ? ?? ?? ? ? ????.

???? Bundlers? ??? ?? ???? ???? ?????.

 // ? ? ??
Splitchunks : {
  ?? : 'All',
  ?? ? ?? : {
    ????: {
      ??? :/[\\/] node_modules [\\/]/,
      ?? : '?? ??',
      ?? ?? : 10,
      ReuseeexistingChunk : True,
    }
  }
}

?? ? ?? ??

• Dynamic import() ?? - ?? ??? ????? ?? ?????.
• Bundle ?? - Webpack Bundle Analyzer ? ?? ??? ??? ???? ?? ??????.
• Smartly? ?? ?? ?? ?? -??? ??? ???? <link rel="prefetch"> ??????.
• ??? CSS/JS? ?? ?????? - ??? ????? ?? ???? ??? ?????? ?? ?? ????.
• ?? ??? ??? ?? ??? ?? ?? ????-???? ?? ??? ?????? ??????.

? : import _ from 'lodash' ? ?? lodash ?? ??? ?? ?????? ?????. ?? import { debounce } from 'lodash-es' ???? ??? ?? ?? ????.

??? ??????

• ?? ?? ?? ??? HTTP ?? ?? (?? HTTP/1)? ?? ??? ?? ? ????.
• ?? ??? ???????? (? : React ????? ??).
• ?? ???? (??, ??)? ? ?? ??? ??? ? ????.

?? ?? ??? ? ? ??? ??? ????. ??? ??? ????? ?????.

?? ??? ??? ???? ???? ???? ?? ? ??? ?? ?????. ??? ?? ? ?? ?? ??? ???? ???? ? ??? ?????.

????? : ??? ?? ???? ??? ?? ?????????.

? ??? ?? JS ??? ?? ?? ? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!