CommonJS 와 ES Modules 의 번들 크기 비교

https://web.dev/commonjs-larger-bundles/ 의 예시 코드를 직접 돌려본 결과 입니다.

https://github.com/youngkiu/cjs-vs-esm-size

CommonJS codes

# index.js
const { add } = require('./utils');

console.log(add(1, 2));

# utils.js
const { maxBy } = require('lodash-es');

const fns = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
  max: arr => maxBy(arr)
};

Object.keys(fns).forEach(fnName => module.exports[fnName] = fns[fnName]);

ES Modules codes

# index.js
import { add } from './utils';

console.log(add(1, 2));

# utils.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;

import { maxBy } from 'lodash-es';

export const max = arr => maxBy(arr);

lodash package & version	webpack version	CommonJS bundle size	ES Modules bundle size
lodash-es@4.17.21	webpack@4.46.0, webpack-cli@3.3.12	102270	9576
lodash-es@4.17.21	webpack@5.74.0, webpack-cli@4.10.0	90027	38
lodash@4.17.21	webpack@5.74.0, webpack-cli@4.10.0	71029	70851