JavaScript? ?? ??? ??: ?? ???

?? ? ?? ????? ?????? ??? ????? ?? ?? ?????. ? ?? ?? JavaScript ??? ???? ??? ?? ? ??? Tree Shaking???. Webpack?? Rollup? ?? ?? ??? ???? ?? ??? ? ??? ????? ????. ??? ?? ????? ??? ????, ??? ??????

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

---

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

?? ???? ?? ???? ?? JavaScript ???? ???? ??? ?? ??? ???? ???????. ??? "??? ???", ???? ?? ???(??)? ????? ???? ??? ?????.

?? ???? ?? ???? ? ????? ?? ??? ???? ES6(ES2015) ?? ???? ?????. ??? ?? ??? ?? ???? ??? ?? ??? ???? ?? ??? ???? ??? ? ??? ??? ? ????.

---

?? ???(Tree Shaking)? ? ??????

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

1. ?? ?? ??: ???? ?? ??? ???? JavaScript ??? ? ???? ?? ??? ?????.
2. ??? ??: ??? ???? ?????? ?? ??, ???, ???? ?? ??? ?????.
3. ? ?? ??? ??: ? ???? ???? ????? ? ? ?? ???.
4. ?? ??? ??: ?? ??? ???? ??? ??? ???? ?? ??? ????? ?????.

---

?? ??? ?? ??

?? ???? ES6 ?? ???? ? ????? ?? ??? ?????. ???? ?? ??? ???? ?? ???? ?? ?????. ?? ???? ?????? ?? ?? ??? ???? ???.

1. ES6 ?? ??:
   ?? ???? ???? ? ??????? ?????. CommonJS(require/module.exports)? ????? ???? ??? ? ????.

2. Tree Shaking? ???? ???:
   Webpack, Rollup, Parcel? ?? ??? ?? ???? ?????.

3. ??? ??:
   ???? ?? ??? ????? ???? ???? ???? ??? ?????.

---

?: ?? ?? ??? ??

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

1??: ?? ????? ??? ?? ??

math.js?? ?? ??? ????.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

2??: ??? ?? ????

?? ??? main.js??? ?? ??? ?????.

// main.js
import { add } from './math.js';

console.log(add(5, 3)); // Output: 8

3??: ?? ??

Webpack?? Rollup? ?? ???? ?????. ?? ???? ????? ???? ?? ??(??, ??, ???)? ?? ???? ?????.

---

Webpack? ??? ?? ???

1??: ?? ??

Webpack ? Babel ??:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

2??: Webpack ??

webpack.config.js ?? ???:

const path = require('path');

module.exports = {
  mode: 'production', // Enables optimizations like tree shaking
  entry: './

src/main.js', // Your main JavaScript file
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  optimization: {
    usedExports: true, // Tells Webpack to identify unused exports
  },
};

3??: Webpack ??

?? ?? ??:

npx webpack

Webpack? ?? ???? ??, ???, ??? ? ???? ?? ????? ???? ?????.

---

??? ??? ?? ???

Rollup? ??? ?? ??? ???? ? ??? ? ?? ?? ??????.

1??: ?? ??

?? ? ?? ??:

npm install --save-dev rollup @rollup/plugin-babel @rollup/plugin-node-resolve

2??: ?? ??

rollup.config.js ?? ???:

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es', // Keep the ES module format
  },
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-env'],
    }),
  ],
};

3??: ?? ??

?? ?? ??:

npx rollup -c

?? ??? Webpack? ????? ???? ?? ????? ?????.

---

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

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

1. ?? ????:
   ?? ????(?: require() ?? ?? ????())? ???? ?? ???? ?? ???? ??? ? ???? ?? ???? ???? ????.

2. ???:
   ?? ??? ????? ?? ??? ?????.
   ?:
   

   // module.js
   console.log('This is a side effect');
   export const example = () => {};
   

   ???? package.json?? ????? "??? ??"?? ???? ?? ? ????? ??? ????? ???? ????.
   

   {
   "sideEffects": false
   }
   

3. ??? ?? ??:
   ???? ES6 ?? ??? ????? ?????. CommonJS? ???? ?? ???? ???? ????.

4. ?? ??? ???? ??:
   ???? ??? ??(Webpack? UsedExports ?? Rollup? ??? ????)? ????? ??? ?????.

---

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

• ??? ?? ??: CommonJS ?? ES6 ??(???? ? ????)? ?????.

• ??? ??: package.json ??? ??? ?? ??? ?????.

• ??? ?? ??: ????? ???? Rollup, ???????? Webpack? ?? ???? ?????.

• ???? ?????: ???? ?? ??? ??? ? ???? ?? ?????? ?? ??????.

• ?? ?? ???: ?? ???? ?? ?? ????? ?????. ???? ?????? ???? ??? ?????.

---

??

?? ???? ?? JavaScript ??? ???? ?????. ???? ?? ??? ???? ?????? ??? ????? ?? ??? ??? ? ??? ???. Webpack ? Rollup? ?? ??? ???? ?? ??? ??? ES6 ??? ???? ? ?? ???? ???? ?? ?????.

?? ???? ?? ??? ???? ? ??? ???? ????? ??? ??? ? ??????? ??? ? ????. ?? ?? ??? ???? ? ??? ??? ??? ?????!

---

?? ??

• MDN ? ??: ??
• Webpack Tree Shaking ???
• ?? ??

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