diff --git a/src/content/comparison.mdx b/src/content/comparison.mdx index 61150db89d8c..09e0c85e1267 100644 --- a/src/content/comparison.mdx +++ b/src/content/comparison.mdx @@ -8,6 +8,7 @@ contributors: - tashian - simon04 - byzyk + - karanrajsurya related: - title: JSPM vs. webpack url: https://ilikekillnerds.com/2015/07/jspm-vs-webpack/ @@ -17,40 +18,53 @@ related: Webpack is not the only module bundler out there. If you are choosing between using webpack or any of the bundlers below, here is a feature-by-feature comparison on how webpack fares against the current competition. -| Feature | webpack/webpack | jrburke/requirejs | substack/node-browserify | jspm/jspm-cli | rollup/rollup | brunch/brunch | -| -------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -| Additional chunks are loaded on demand | **yes** | **yes** | no | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule) | no | no | -| AMD `define` | **yes** | **yes** | [deamdify](https://github.com/jaredhanson/deamdify) | yes | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd) | yes | -| AMD `require` | **yes** | **yes** | no | yes | no | yes | -| AMD `require` loads on demand | **yes** | with manual configuration | no | yes | no | no | -| CommonJS `exports` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes | -| CommonJS `require` | **yes** | only wrapping in `define` | **yes** | yes | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | yes | -| CommonJS `require.resolve` | **yes** | no | no | no | no | | -| Concat in require `require("./fi" + "le")` | **yes** | no♦ | no | no | no | | -| Debugging support | **SourceUrl, SourceMaps** | not required | SourceMaps | **SourceUrl, SourceMaps** | **SourceUrl, SourceMaps** | SourceMaps | -| Dependencies | 19MB / 127 packages | 11MB / 118 packages | **1.2MB / 1 package** | 26MB / 131 packages | ?MB / 3 packages | | -| ES2015 `import`/`export` | **yes** (webpack 2) | no | no | **yes** | **yes** | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) | -| Expressions in require (guided) `require("./templates/" + template)` | **yes (all files matching included)** | no♦ | no | no | no | no | -| Expressions in require (free) `require(moduleName)` | with manual configuration | no♦ | no | no | no | | -| Generate a single bundle | **yes** | yes♦ | yes | yes | yes | yes | -| Indirect require `var r = require; r("./file")` | **yes** | no♦ | no | no | no | | -| Load each file separate | no | yes | no | yes | no | no | -| Mangle path names | **yes** | no | partial | yes | not required (path names are not included in the bundle) | no | -| Minimizing | [Terser](https://github.com/fabiosantoscode/terser) | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) | -| Multi pages build with common bundle | with manual configuration | **yes** | with manual configuration | with bundle arithmetic | no | no | -| Multiple bundles | **yes** | with manual configuration | with manual configuration | yes | no | yes | -| Node.js built-in libs `require("path")` | **yes** | no | **yes** | **yes** | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve) | | -| Other Node.js stuff | process, \_\_dir/filename, global | - | process, \_\_dir/filename, global | process, \_\_dir/filename, global for cjs | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) | | -| Plugins | **yes** | yes | **yes** | yes | yes | yes | -| Preprocessing | **loaders** | loaders | transforms | plugin translate | plugin transforms | compilers, optimizers | -| Replacement for browser | `web_modules`, `.web.js`, package.json field, alias configuration option | alias option | package.json field, alias option | package.json, alias option | no | | -| Requirable files | file system | **web** | file system | through plugins | file system or through plugins | file system | -| Runtime overhead | **243B + 20B per module + 4B per dependency** | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | **none for ES2015 modules** (other formats may have) | | -| Watch mode | yes | not required | [watchify](https://github.com/browserify/watchify) | not needed in dev | [rollup-watch](https://github.com/rollup/rollup-watch) | yes | - -♦ in production mode (opposite in development mode) - -X is the length of the path string +> ♦ in production mode (opposite in development mode) + +> X is the length of the path string + +## Module System Support + +| Tool | Additional chunks on demand | AMD `define` | AMD `require` | AMD `require` on demand | CommonJS `exports` | CommonJS `require` | CommonJS `require.resolve` | ES2015 `import`/`export` | +| ---------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------: | :-----------: | :---------------------: | :-----------------------------------------------------------------: | :-----------------------------------------------------------------: | :------------------------: | :----------------------------------------------------------------------------------------: | +| **webpack/webpack** | **yes** | **yes** | **yes** | **yes** | **yes** | **yes** | **yes** | **yes** (webpack 2) | +| **jrburke/requirejs** | **yes** | **yes** | **yes** | manual config | `define` wrap only | `define` wrap only | no | no | +| **substack/node-browserify** | no | [deamdify](https://github.com/jaredhanson/deamdify) | no | no | **yes** | **yes** | no | no | +| **jspm/jspm-cli** | [System.import](https://github.com/systemjs/systemjs/blob/master/docs/system-api.md#systemimportmodulename--normalizedparentname---promisemodule) | yes | yes | yes | yes | yes | no | **yes** | +| **rollup/rollup** | no | [rollup-plugin-amd](https://github.com/piuccio/rollup-plugin-amd) | no | no | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | [commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs) | no | **yes** | +| **brunch/brunch** | no | yes | yes | no | yes | yes | | yes, via [es6 module transpiler](https://github.com/gcollazo/es6-module-transpiler-brunch) | + +## Require & Path Handling + +| Tool | Concat in require | Expressions (guided) | Expressions (free) | Indirect require | Mangle paths | Node.js built-ins | Other Node.js stuff | Browser replacement | Requirable files | +| ---------------------------- | :---------------: | :-----------------------------------: | :----------------: | :--------------: | :----------: | :-------------------------------------------------------------------------: | ---------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------- | +| **webpack/webpack** | **yes** | **yes (all files matching included)** | manual config | **yes** | **yes** | **yes** | process, \_\_dir/filename, global | `web_modules`, `.web.js`, package.json field, alias config option | **243B + 20B per module + 4B per dependency** | +| **jrburke/requirejs** | no♦ | no♦ | no♦ | no♦ | no | no | - | alias options | **web** | +| **substack/node-browserify** | no | no | no | no | partial | **yes** | process, \_\_dir/filename, global | package.json field, alias option | file system | +| **jspm/jspm-cli** | no | no | no | no | yes | **yes** | process, \_\_dir/filename, global for cjs | package.json, alias option | through plugins | +| **rollup/rollup** | no | no | no | no | not required | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve) | global ([commonjs-plugin](https://github.com/rollup/rollup-plugin-commonjs)) | no | file system or through plugins | +| **brunch/brunch** | | no | | | no | | | | file system | + +## Build & Output + +| Tool | Generate single bundle | Multi pages build | Multiple bundles | Load each file separate | Minimizing | Preprocessing | Plugins | +| ---------------------------- | :--------------------: | :---------------: | :--------------: | :---------------------: | ----------------------------------------------------------------- | --------------------- | :-----: | +| **webpack/webpack** | **yes** | manual config | **yes** | no | [Terser](https://github.com/fabiosantoscode/terser) | loaders | **yes** | +| **jrburke/requirejs** | yes♦ | **yes** | manual config | yes | uglify, closure compiler | loaders | yes | +| **substack/node-browserify** | yes | manual config | manual config | no | [uglifyify](https://github.com/hughsk/uglifyify) | transforms | **yes** | +| **jspm/jspm-cli** | yes | bundle arithmetic | yes | yes | yes | plugin translate | yes | +| **rollup/rollup** | yes | no | no | no | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | plugin transforms | yes | +| **brunch/brunch** | yes | no | yes | no | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch) | compilers, optimizers | yes | + +## Developer Experience + +| Tool | Debugging support | Watch mode | Dependencies | Runtime overhead | +| ---------------------------- | ------------------------- | ------------------------------------------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------- | +| **webpack/webpack** | **SourceUrl, SourceMaps** | **yes** | 19MB / 127 packages | **yes** | +| **jrburke/requirejs** | not required | not required | 11MB / 118 packages | 14.7kB + 0B per module + (3B + X) per dependency | +| **substack/node-browserify** | SourceMaps | [watchify](https://github.com/browserify/watchify) | **1.2MB / 1 package** | 415B + 25B per module + (6B + 2X) per dependency | +| **jspm/jspm-cli** | **SourceUrl, SourceMaps** | not needed in dev | 26MB / 131 packages | 5.5kB self-exec bundles, 38kB full loader+polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | +| **rollup/rollup** | **SourceUrl, SourceMaps** | [rollup-watch](https://github.com/rollup/rollup-watch) | ?MB / 3 packages | **none for ES2015 modules** (other formats may have) | +| **brunch/brunch** | SourceMaps | yes | | | ## Bundling vs. Loading