Bundler Tree Shaking 원리 및 차이점

// index.js
import { a } from "./re-exports";
console.log(a);
// re-exports.js
export * from "./module"; // `index -(a)-> re-exports -(a)-> module` 최적화되어 `index -(a)-> module`로, re-exports.js 자체는 로컬 export가 없고 사용되고 있으며, side effect가 없으므로 re-exports.js를 안전하게 제거할 수 있습니다.
// module.js
export const a = 42;

// index.js
import { f } from "./lib";
f();
// lib.js
import { a } from "./module";
export const f = () => 42;
export const g = () => a; // `g`가 사용되지 않으므로, `const g = () => a`를 생성하면 `a`가 참조되어 `a`가 tree-shaken되는 것을 방지합니다.
// module.js
export const a = 42;

// index.js
import { aVeryLongLongLongName } from "./constants.js"
console.log(aVeryLongLongLongName ? 1 : 2)
// constants.js
export const aVeryLongLongLongName = 42;

// webpack 번들링 후:
// output.js
const __webpack_modules__ = {
  "./index.js": (__webpack_require__) => {
    const _constants__WEBPACK_MODULE__ = __webpack_require__("./constants.js");
    console.log(_constants__WEBPACK_MODULE__.A ? 1 : 2);
  },
  "./constants.js": (__webpack_require__) => {
    __webpack_require__.d({
      A: () => A,
    })
    const A = 42;
  }
}

// `optimization.concatenateModules`를 활성화하면 출력이 minifier에 더 친화적이 되어 더 나은 압축과 더 작은 번들 크기를 가능하게 합니다.
;// CONCATENATED MODULE: ./constants.js
const A = 42
;// CONCATENATED MODULE: ./index.js
console.log(A ? 1 : 2) // 이제 minifier가 최적화할 수 있습니다.

 // output.js
 const __webpack_modules__ = {
   "./index.js": (__webpack_require__) => {
     const _module__WEBPACK_MODULE__ = __webpack_require__("./constants.js");
-    console.log(_constants__WEBPACK_MODULE__.aVeryLongLongLongName ? 1 : 2);
+    console.log(_constants__WEBPACK_MODULE__.a ? 1 : 2);
   },
   "./constants.js": (__webpack_require__) => {
     __webpack_require__.d({
-      aVeryLongLongLongName: () => aVeryLongLongLongName,
+      a: () => aVeryLongLongLongName,
     })
     const aVeryLongLongLongName = 42;
   }
 }

// output.js
const __webpack_modules__ = {
  "./index.js": (__webpack_require__) => {
    console.log(42 ? 1 : 2); // 이제 minifier가 최적화할 수 있습니다.
  },
}

// PS: Turbopack의 관련 코드는 단순화되고 수정되었습니다. 현재 Turbopack은 청크 분할 결과를 세밀하게 제어할 수 있는 구성을 아직 제공하지 않습니다.

// entry1.js용 청크
module.exports = {
  "entry1.js": (__turbopack_context__) => {
    var _data_1__TURBOPACK_MODULE__ = __turbopack_context__.i("data.js <part 1>");
    console.log(_data_1__TURBOPACK_MODULE__.data);
  },
}
// entry2.js용 청크
module.exports = {
  "entry2.js": (__turbopack_context__) => {
    var _data_2__TURBOPACK_MODULE__ = __turbopack_context__.i("data.js <part 2>");
    _data_2__TURBOPACK_MODULE__.setData(123);
  },
  "data.js <part 2>": (__turbopack_context__) => {
    __turbopack_context__.s({
      setData: () => setData,
    });
    var _data_1__TURBOPACK_MODULE__ = __turbopack_context__.i("data.js <part 1>");
    function setData(value) {
      _data_1__TURBOPACK_MODULE__.data = value; // <--- 이것이 setter를 트리거합니다.
    }
  },
}
// 공유 코드용 청크
module.exports = {
  "data.js <part 1>": (__turbopack_context__) => {
    __turbopack_context__.s({
      data: [
        () => data, // <--- getter
        (new_data) => data = new_data, // <--- setter
      ]
    });
    let data;
  },
}

// 공유 코드용 청크
module.exports = {
  // ...
  "data.js <part 0>": (__turbopack_context__) => {
    __turbopack_context__.a(async (__turbopack_handle_async_dependencies__, __turbopack_async_result__) => {
      try {
        await 1; // <--- 추가된 `await 1;`은 __turbopack_context__.a 런타임으로 래핑되어 최상위 await가 올바르게 실행되도록 보장합니다.
        __turbopack_async_result__();
      } catch(e) { __turbopack_async_result__(e) }
    }, true);
  },
  // ...
}