赞助 webpack,同时从官方商店购买衣服 所有收益将转到我们的 open collective

对比

webpack 不仅仅作为模块打包器存在。如果你要在使用 webpack 或下面任意的打包器之间进行选择,这里列出了 webpack 特性,以及和其他竞品之间的功能对比。

特性
webpack/webpack
jrburke/requirejs
substack/node-browserify
jspm/jspm-cli
rollup/rollup
brunch/brunch
特性
附加模块按需加载
webpack/webpack
yes
jrburke/requirejs
yes
substack/node-browserify
no
jspm/jspm-cli
rollup/rollup
no
brunch/brunch
no
特性
AMD define
webpack/webpack
yes
jrburke/requirejs
yes
substack/node-browserify
jspm/jspm-cli
yes
rollup/rollup
brunch/brunch
yes
特性
AMD require
webpack/webpack
yes
jrburke/requirejs
yes
substack/node-browserify
no
jspm/jspm-cli
yes
rollup/rollup
no
brunch/brunch
yes
特性
AMD require 按需加载
webpack/webpack
yes
jrburke/requirejs
手动配置
substack/node-browserify
no
jspm/jspm-cli
yes
rollup/rollup
no
brunch/brunch
no
特性
CommonJS exports
webpack/webpack
yes
jrburke/requirejs
只包含在 define
substack/node-browserify
yes
jspm/jspm-cli
yes
rollup/rollup
brunch/brunch
yes
特性
CommonJS require
webpack/webpack
yes
jrburke/requirejs
只包含在 define
substack/node-browserify
yes
jspm/jspm-cli
yes
rollup/rollup
brunch/brunch
yes
特性
CommonJS require.resolve
webpack/webpack
yes
jrburke/requirejs
no
substack/node-browserify
no
jspm/jspm-cli
no
rollup/rollup
no
brunch/brunch
特性
require 中拼接 require("./fi" + "le")
webpack/webpack
yes
jrburke/requirejs
no♦
substack/node-browserify
no
jspm/jspm-cli
no
rollup/rollup
no
brunch/brunch
特性
调试支持
webpack/webpack
SourceUrl, SourceMaps
jrburke/requirejs
不需要
substack/node-browserify
SourceMaps
jspm/jspm-cli
SourceUrl, SourceMaps
rollup/rollup
SourceUrl, SourceMaps
brunch/brunch
SourceMaps
特性
依赖
webpack/webpack
19MB / 127 个程序包
jrburke/requirejs
11MB / 118 个程序包
substack/node-browserify
1.2MB / 1 个程序包
jspm/jspm-cli
26MB / 131 个程序包
rollup/rollup
?MB / 3 个程序包
brunch/brunch
特性
ES2015 import/export
webpack/webpack
yes (webpack 2)
jrburke/requirejs
no
substack/node-browserify
no
jspm/jspm-cli
yes
rollup/rollup
yes
brunch/brunch
yes, 通过 es6 模块转换器
特性
require (guided) 中的表达式 require("./templates/" + template)
webpack/webpack
yes (包括所有匹配的文件)
jrburke/requirejs
no♦
substack/node-browserify
no
jspm/jspm-cli
no
rollup/rollup
no
brunch/brunch
no
特性
require (free) 中的表达式 require(moduleName)
webpack/webpack
手动配置
jrburke/requirejs
no♦
substack/node-browserify
no
jspm/jspm-cli
no
rollup/rollup
no
brunch/brunch
特性
生成单独包
webpack/webpack
yes
jrburke/requirejs
yes♦
substack/node-browserify
yes
jspm/jspm-cli
yes
rollup/rollup
yes
brunch/brunch
yes
特性
间接的 require var r = require; r("./file")
webpack/webpack
yes
jrburke/requirejs
no♦
substack/node-browserify
no
jspm/jspm-cli
no
rollup/rollup
no
brunch/brunch
特性
分别加载每个文件
webpack/webpack
no
jrburke/requirejs
yes
substack/node-browserify
no
jspm/jspm-cli
yes
rollup/rollup
no
brunch/brunch
no
特性
损坏的路径名
webpack/webpack
yes
jrburke/requirejs
no
substack/node-browserify
部分
jspm/jspm-cli
yes
rollup/rollup
不需要(路径名称不在包中)
brunch/brunch
no
特性
压缩
webpack/webpack
terser
jrburke/requirejs
uglify, closure compiler
substack/node-browserify
jspm/jspm-cli
yes
rollup/rollup
brunch/brunch
特性
用 common bundle 构建多页
webpack/webpack
手动配置
jrburke/requirejs
yes
substack/node-browserify
手动配置
jspm/jspm-cli
使用包算法
rollup/rollup
no
brunch/brunch
no
特性
多个 bundle
webpack/webpack
yes
jrburke/requirejs
手动配置
substack/node-browserify
手动配置
jspm/jspm-cli
yes
rollup/rollup
no
brunch/brunch
yes
特性
Node.js 内置 libs require("path")
webpack/webpack
yes
jrburke/requirejs
no
substack/node-browserify
yes
jspm/jspm-cli
yes
rollup/rollup
brunch/brunch
特性
Node.js 其他
webpack/webpack
process, __dir/filename, global
jrburke/requirejs
-
substack/node-browserify
process, __dir/filename, global
jspm/jspm-cli
process, __dir/filename, global for cjs
rollup/rollup
global (commonjs-plugin)
brunch/brunch
特性
插件
webpack/webpack
yes
jrburke/requirejs
yes
substack/node-browserify
yes
jspm/jspm-cli
yes
rollup/rollup
yes
brunch/brunch
yes
特性
预处理
webpack/webpack
loaders, transforms
jrburke/requirejs
loaders
substack/node-browserify
transforms
jspm/jspm-cli
plugin translate
rollup/rollup
plugin transforms
brunch/brunch
compilers, optimizers
特性
浏览器替换
webpack/webpack
web_modules, .web.js, package.json field, alias config option
jrburke/requirejs
alias option
substack/node-browserify
package.json field, alias option
jspm/jspm-cli
package.json, alias option
rollup/rollup
no
brunch/brunch
特性
可 require 文件
webpack/webpack
文件系统
jrburke/requirejs
web
substack/node-browserify
文件系统
jspm/jspm-cli
通过插件
rollup/rollup
文件系统或通过插件
brunch/brunch
文件系统
特性
执行时(runtime)开销
webpack/webpack
243B + 20B 每个模块 + 4B 每个依赖
jrburke/requirejs
14.7kB + 0B 每个模块 + (3B + X) 每个依赖
substack/node-browserify
415B + 25B 每个模块 + (6B + 2X) 每个依赖
jspm/jspm-cli
5.5kB for 自执行 bundle, 38kB 全部 loader 和 polyfill, 0 普通模块, 293B CJS, 139B ES2015 System.register before gzip
rollup/rollup
none for ES2015 modules(可能有其他格式)
brunch/brunch
特性
开发文件监听(watch)模式
webpack/webpack
yes
jrburke/requirejs
不需要
substack/node-browserify
jspm/jspm-cli
开发不需要
rollup/rollup
brunch/brunch
yes

♦ 在 production mode(在 development mode 中相反)

X 是路径字符串的长度

打包 vs. 加载

注意_加载_和_打包_模块之间的一些关键区别很重要。可以在 JSPM 引擎下找到像 SystemJS 的工具,用于在浏览器通过运行时(runtime)来加载和转译模块。这和 webpack 有着显著不同,在加载到浏览器之前,模块就已经被转译(通过 "loaders")并打包在一起。

每种方法都有其优势和劣势。运行时(runtime)加载和转译模块,为大型网站增加了大量开销,并且应用程序会由许多模块组成。因此,SystemJS 对于需要少量模块的小型项目更有意义。但是,随着 HTTP/2 改善文件从服务器到客户端的传输速度,这可能会发生一些变化。请注意,HTTP/2 不会修改_转译_模块的任何内容,在客户端下载完成后,还是需要很长时间去进行转译。


进一步阅读


贡献人员