Comparison

Webpack은 유일한 모듈 번들러가 아닙니다. Webpack 또는 아래 번들러 중 하나를 사용하는 경우, webpack이 현재 경쟁 제품과 어떻게 비교되는지에 대한 기능별 비교가 아래에 있습니다.

기능webpack/webpackjrburke/requirejssubstack/node-browserifyjspm/jspm-clirollup/rollupbrunch/brunch
요구에 따른 추가 청크 로드아니오System.import아니오아니오
AMD definedeamdifyrollup-plugin-amd
AMD require아니오아니오
AMD require loads on demand수동 설정으로아니오아니오아니오
CommonJS exportsdefine으로 감싼것만commonjs-plugin
CommonJS requiredefine으로 감싼것만commonjs-plugin
CommonJS require.resolve아니오아니오아니오아니오-
require에서의 연결 require("./fi" + "le")아니오♦아니오아니오아니오-
디버깅 지원소스Url(SourceUrl), 소스맵(SourceMaps)불필요소스맵(SourceMaps)소스Url(SourceUrl), 소스맵(SourceMaps)소스Url(SourceUrl), 소스맵(SourceMaps)소스맵(SourceMaps)
의존성19MB / 127 패키지11MB / 118 패키지1.2MB / 1 패키지26MB / 131 패키지?MB / 3 패키지-
ES2015 import/export (webpack 2)아니오아니오예, es6 모듈 트랜스파일러를 통해
require에서의 표현식 (가이드된) require("./templates/" + template)예 (모든 파일 매칭 포함)아니오♦아니오아니오아니오아니오
require에서의 표현식 (자율) require(moduleName)수동 설정으로아니오♦아니오아니오아니오-
단일 번들 생성예♦
간접 require 구문 var r = require; r("./file")아니오♦아니오아니오아니오-
각 파일을 별도로 로드아니오아니오아니오아니오
경로 이름 변경아니오부분적으로불필요 (경로이름이 번들에 포함되지 않음)아니오
최소화Terseruglify, 클로저 컴파일러uglifyifyuglify-pluginUglifyJS-brunch
공통 번들로 구성된 다중 페이지 작성수동 설정으로수동 설정으로번들 계산으로아니오아니오
여러 개의 번들수동 설정으로수동 설정으로아니오
Node.js 내장 라이브러리 require("path")아니오node-resolve-plugin-
그밖에 Node.js 관련process, __dir/filename, global-process, __dir/filename, globalprocess, __dir/filename, global for cjsglobal (commonjs-plugin)-
플러그인
전처리로더로더변환플러그인 번역플러그인 번환컴파일러, 최적화 도구
브라우저 대체web_modules, .web.js, package.json 필드, 별칭 설정 옵션별칭 옵션package.json 필드, 별칭 옵션package.json, 별칭 옵션아니오-
필수 파일파일 시스템파일 시스템플러그인을 통해파일 시스템이나 플러그인을 통해파일 시스템
런타임 오버헤드243B + 20B per module + 4B per dependency14.7kB + 0B 모듈별로 + (3B + X) 의존성별로415B + 25B 모듈별로 + (6B + 2X) 의존성별로5.5kB 자체 실행 번들을 위해, 38kB 전체 로더와 폴리필을 위해, 0 일반 모듈, 293B CJS, 139B ES2015 System.register gzip실행전ES2015 모듈이 없음 (다른 포멧이 있을 수 있음)-
Watch 모드불필요watchify개발환경에서 필요없음rollup-watch

♦ 프로덕션 모드에서 (개발 모드와 반대)

X는 경로 문자열의 길이 입니다

Bundling vs. Loading

로딩번들링 모듈 간의 몇 가지 주요 차이점을 확인하는 것이 중요합니다. JSPM의 내부에 있는 [SystemJS와] (https://github.com/systemjs/systemjs) 같은 도구를 사용하여 브라우저에서 런타임에 모듈을 로드하고 트랜스파일 합니다. 이는 모듈이 트랜스파일되고 ("로더"를 통해) 브라우저에 도달하기 전에 번들로 제공되는 webpack과는 상당히 다릅니다.

각 방법에는 장단점이 있습니다. 런타임에 모듈을 로드하고 트랜스파일하면 많은 모듈로 구성된 대규모 사이트와 애플리케이션에 많은 오버헤드를 추가할 수 있습니다. 이러한 이유로 SystemJS는 필요한 모듈이 적은 소규모 프로젝트에 더 적합합니다. 그러나 HTTP/2가 서버에서 클라이언트로 파일을 전송할 수 있는 속도를 향상시키기 때문에 다소 변경될 수 있습니다. HTTP/2는 트랜스파일 모듈에 대한 어떤 것도 변경하지 않으며, 클라이언트에서 수행할 때 항상 시간이 더 오래 걸립니다.


Translators