webapp build
strategy
État de l'art de ES2015+ dans Node.js et le navigateur - Blend Web Mix - Christophe Porteneuve - 20161121
(Par compilation ils parlent de Babel notamment)
Question : Tu compiles pour autant de cibles que tu as de navigaters ?
Réponse : Nononon tu fais une compilation, mais par contre tu vises le plus petit dénominateur commun.
Tu peux choisir de faire plusieurs compilations mais ça va complexifier pas mal de chaine de déploiement.
Comment tu vas faire, tu vas faire du browser sniffing ? Avec la gueule qu'ont les user-agents aujourd'hui ? Non c'est pas possible.
Tu pourrais faire de la feature detection, le problème c'est que tu vas ralentir énormément puisque tu dois d'abord feature détecter puis recharger derrière.
En gros ce qui marche, même pour les gros sites, c'est le plus petit dénominateur commun. Même si tu transpiles tout, parce que
tu vises IE9+ en gros, t'obtiens quelque chose d'éminament utilisable. C'est ce que font les gros.
Intellectuellement on fait "ah ouai machin" mais, commence par minimiser la jpeg de 900ko dans ta home, implémente http2,
fais des choses qui servent pour de vrai, mettre des vrais entêtes de caches, etc ...
bundlers
bundler projects
browserify
JSPM
package manager (onto npm and github) AND bundler
Uses SystemJS
webpack
rollup.js
brunch
fuse-box
Parcel
Comparison by features
Extracted from the unreadable webpack website markdown table :
| 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 |
no |
no |
AMD define |
yes |
yes |
deamdify |
yes |
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 |
| Feature |
webpack/webpack |
jrburke/requirejs |
substack/node-browserify |
jspm/jspm-cli |
rollup/rollup |
brunch/brunch |
CommonJS exports |
yes |
only wrapping in define |
yes |
yes |
commonjs-plugin |
yes |
CommonJS require |
yes |
only wrapping in define |
yes |
yes |
commonjs-plugin |
yes |
CommonJS require.resolve |
yes |
no |
no |
no |
no |
|
Concat in require require("./fi" + "le") |
yes |
no♦ |
no |
no |
no |
| Feature |
webpack/webpack |
jrburke/requirejs |
substack/node-browserify |
jspm/jspm-cli |
rollup/rollup |
brunch/brunch |
| 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 |
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 |
| Feature |
webpack/webpack |
jrburke/requirejs |
substack/node-browserify |
jspm/jspm-cli |
rollup/rollup |
brunch/brunch |
| 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 |
uglify |
uglify, closure compiler |
uglifyify |
yes |
uglify-plugin |
UglifyJS-brunch |
| Feature |
webpack/webpack |
jrburke/requirejs |
substack/node-browserify |
jspm/jspm-cli |
rollup/rollup |
brunch/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 |
|
| Other Node.js stuff |
process, __dir/filename, global |
- |
process, __dir/filename, global |
process, __dir/filename, global for cjs |
global (commonjs-plugin) |
|
| Plugins |
yes |
yes |
yes |
yes |
yes |
yes |
| Feature |
webpack/webpack |
jrburke/requirejs |
substack/node-browserify |
jspm/jspm-cli |
rollup/rollup |
brunch/brunch |
| Preprocessing |
loaders, transforms |
loaders |
transforms |
plugin translate |
plugin transforms |
compilers, optimizers |
| Replacement for browser |
web_modules, .web.js, package.json field, alias config 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 |
not needed in dev |
rollup-watch |
yes |