对比
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 不会修改_转译_模块的任何内容,在客户端下载完成后,还是需要很长时间去进行转译。