对比
webpack 不仅仅作为模块打包器存在。如果你要在使用 webpack 或下面任意的打包器之间进行选择,这里列出了 webpack 特性,以及和其他竞品之间的功能对比。
substack/node-browserify
no
substack/node-browserify
no
substack/node-browserify
no
jrburke/requirejs
只包含在 define
中
substack/node-browserify
yes
jrburke/requirejs
只包含在 define
中
substack/node-browserify
yes
特性
CommonJS require.resolve
substack/node-browserify
no
特性
require 中拼接 require("./fi" + "le")
substack/node-browserify
no
webpack/webpack
SourceUrl, SourceMaps
substack/node-browserify
SourceMaps
jspm/jspm-cli
SourceUrl, SourceMaps
rollup/rollup
SourceUrl, SourceMaps
webpack/webpack
19MB / 127 个程序包
jrburke/requirejs
11MB / 118 个程序包
substack/node-browserify
1.2MB / 1 个程序包
jspm/jspm-cli
26MB / 131 个程序包
rollup/rollup
?MB / 3 个程序包
webpack/webpack
yes (webpack 2)
substack/node-browserify
no
特性
require (guided) 中的表达式 require("./templates/" + template)
webpack/webpack
yes (包括所有匹配的文件)
substack/node-browserify
no
特性
require (free) 中的表达式 require(moduleName)
substack/node-browserify
no
substack/node-browserify
yes
特性
间接的 require var r = require; r("./file")
substack/node-browserify
no
substack/node-browserify
no
substack/node-browserify
部分
rollup/rollup
不需要(路径名称不在包中)
jrburke/requirejs
uglify, closure compiler
substack/node-browserify
手动配置
substack/node-browserify
手动配置
特性
Node.js 内置 libs require("path")
substack/node-browserify
yes
webpack/webpack
process, __dir/filename, global
substack/node-browserify
process, __dir/filename, global
jspm/jspm-cli
process, __dir/filename, global for cjs
substack/node-browserify
yes
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
substack/node-browserify
文件系统
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(可能有其他格式)
♦ 在 production mode(在 development mode 中相反)
X 是路径字符串的长度
注意_加载_和_打包_模块之间的一些关键区别很重要。可以在 JSPM 引擎下找到像 SystemJS 的工具,用于在浏览器通过运行时(runtime)来加载和转译模块。这和 webpack 有着显著不同,在加载到浏览器之前,模块就已经被转译(通过 "loaders")并打包在一起。
每种方法都有其优势和劣势。运行时(runtime)加载和转译模块,为大型网站增加了大量开销,并且应用程序会由许多模块组成。因此,SystemJS 对于需要少量模块的小型项目更有意义。但是,随着 HTTP/2 改善文件从服务器到客户端的传输速度,这可能会发生一些变化。请注意,HTTP/2 不会修改_转译_模块的任何内容,在客户端下载完成后,还是需要很长时间去进行转译。