CommonJS 와 ES Modules 의 번들 크기 비교

오픈소스·2022년 10월 2일
0
post-thumbnail

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.21webpack@4.46.0, webpack-cli@3.3.121022709576
lodash-es@4.17.21webpack@5.74.0, webpack-cli@4.10.09002738
lodash@4.17.21webpack@5.74.0, webpack-cli@4.10.07102970851

0개의 댓글