?? ???? JavaScript ???? ???? ?? ??? ???? ?? ?? ?? ??? ?? ??? ?? ??? ?????. ES6 ?? (?? ??/????)? ?? ??? ???? ???? ? ?, ?? ?? VITE? ?? ???? ?? ??? ???? ???? ???? ??? ?? ? ? ????. 1. ?? ???? ?? ?? ??? ?? ??? ???? ??? commonjs (require ())? ?? ES6 ????? ?????. 2. ?? ??? ??? ??? ???? ?? ??? ??? ? ???? ?? ???? ??? ???? ??? ?? ??? ??? ?? ??? ????. 3. ???? ?? ???? ?????? ES6 ??? ???? ???? ES ?? ?? (? : Lodash-ES)? ???? ?????? ???? ??? ?? ? ??? ? ?? ?? ????? ?? ?? ?? Bundler? ?? ??? ???? ??? ??????. 4. package.json? "sidefects"??? ???? ???? ???? ?? ?? (?? ? ?? CSS ?? ??)? ????? ???? ?? ????? ???? ?? ? ? ????. 5. Bondlephobia.com, Webpack Bundle Analyzer ?? Source-Map-Gexplorer? ?? ??? ???? ?? ?? ???? ??? ??????. ?? ?????? ? ESM ?? ?? ?? ? ????? ?? ?? ???? ???? ?? ?????. ?? ???? ??? ??? ??? ??? ????? ???? ???? ?????? ??? ???? ?? JavaScript ????? ??? ?? ???? ?????.

?? ???? ?? JavaScript ?? ??? ?? ? ? ??? ? ??? ????. ????? Tree Shaking? ?? ??? ???? ?????. ?, ?????? ??? ???? ?? JavaScript ??? ?????. ??? ? ?? ?? ??, ? ???? ?? ? ? ?? ??.

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

??? ??? ???? ?? (??? ??? ????)

?? ???? ?? ???? ?? ?? ? ?, ?? ?? vite? ?? ???? ???? ?? ?? ?? ?? ???. ??? ???? ?? ?? ??? ????? ?? (?????)?“????”?????? ?????.

ES6 ?? ?? ( import / export )?? ?? ?????. CommonJS ( require() )? ?? ES6 ?? ??? ?????. ?, ?? ? ????? ??? ???? ?? ?? ??? ?? ? ? ????. ? ?? ??? ?? ???? ??? ???? ??? ?? ??? ??? ? ????.

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

?? ??:

 // utils.js
???? const add = (a, b) => ab;
???? suxcract = (a, b) => a -b;

// main.js
'./utils.js'?? {add} import;
Console.log (Add (2, 3));

? ?? subtract ????? ???? ????. ?? ???? ????? ?? ???? ???? ????.

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

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

• ?? ?? : Bundler? ??? ???? ?? import ? export ?? ?????.
• ??? ??? ?? : ??? ?? ??? ????? ???? ????.
• Mark and Sweep : ?? ? ?? ??, ?? ?? ??? ?? ? ?? ???? ?? (???? ??) ???“?????”.

??? ??? ??? ????. ?? ???? ??? ???? ES6 ??? ???? ???? ????? . ?????? commonJS ( module.exports , require() )? ???? ?? ???? ???? ?? ? ? ???? ?? ???? ?????.

?? ??, CommonJS ???? ?? ?? ?? :

 // cjs-module.js
module.exports = {
  ?? : (a, b) => ab,
  ?? : (a, b) => a -b
};

// main.js
const {add} = require ( './ cjs-module');

add ? ?????? require() ? ???? ??? ? ?? ?? ??? ?? ? ????.

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

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

• ? ES6 ?? ??? ???? ?? ( import / export )

• ? ES6 ?? ??? ???? ?????? ?????? ( package.json ?? module ?? exports ??? ?????)

• ? ?? ?? ? ??? ? ?? ?? ??? ?????.

   // ???
  'lodash'?? _ ?? ??;
  Console.log (_. ??? (-5, 0, 10));
  
  // ?? (???? ??)
  'lodash-es'?? {clamp} ?? ??;

• bundler?? ?? ??? ?????? (? : ? ?? ?? ??? mode: 'production' ).

• package ???? ?? ???? ????? ???? ?? Blundlephobia.com ? ?? ??? ??????.

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

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

 // package.json
{
  "Sideeffects": False
}

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

 "???": [
  "./src/polyfills.js",
  "*.CSS"
]]

?? ?? Bundler? ???? ?? ??? ???? ???? ? ??????.

???? ??? ??

• "??? ??? ?? ?? ???? ? ???? ??? ?????."
  ?????? ES ??? ???? ??? ??? ?? ?? ??? ???? ?? (? : lodash-es ?? lodash ?? ?? ??) ??? ????.

• "?? ???? 100%???? ?????."
  ?? ??, ????? ?? ? ?? ??? ?? ????. ?? ???? ?? ??????.

• "?? ??????? ???? ?? ??? ?????."
  ?? ?????? ??? ???? ?? ????? ??? ????. ?? ??? ?? ??? ????? ?? ???? ??? ?? ?? ??? ????.

Webpack Bundle Analyzer ?? Source-Map-Explorer ? ?? ??? ???? ??? ????? ???? ?? ??? ??? ???? ??? ??????.

?? ???? ??? ?????? ??? ?????? ??????. ES ??? ???? ??? ?????? ???? ???? ???? ???? ?? ?? ??? ??????. ??? ?? ??? ???? ?? ???? ??? ???? ?? JavaScript ????? ?? ?? ? ????.

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

? ??? ?? ?? ?? : JavaScript ?? ??? ????? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!