About me • Co-Initiator & Lead Developer of qooxdoo • Initiator of Jasy Tooling & Core Library • Companies: 1&1, studiVZ, Deutsche Telekom, Zynga, Deutsche Bank, Hornbach, Syzygy,, … • Co-Founder of Sebastian Software GmbH • Today: React, VueJS, Webpack, PostCSS, Rollup
Plugin Kind of a middleware which is able to incept basically any operation. Applied after loading of content. Examples: File Loader Plugin: Referencing and copying assets Extract Text Plugin: Extract referenced styles into CSS chunks
Boilerplates • Create React App: Webpack v1, no SSR, Good UX by people at Facebook • React Universally: Universal React + Webpack by Sean Matheson • Advanced Boilerplate: +PostCSS +Apollo +Redux by Sebastian Werner
Compression • Uglify does not work with ES2015 output • Use Babili or Closure Compiler instead • CSS-O is better than CSS Nano • Don’t inline assets into JS
Universal Builds • Bundling Node packages for server build is tricky • Light bundling or big bundle • Replace browser modules with „node-noop“ • Assets Plugin for referring to client chunks on server side • Inject „source-map-support“ for source maps in NodeJS
Performance Strategies • DLL Bundles - but these require some maintenance • Hard Source for fixing rudimentary Webpack Loader Cache • Happy Pack for parallel transpiling. (But that’s quite broken right now.)
Legacy Some legacy stuff which should probably be extracted Legacy hashing, Uglify compression, preliminary progress, … Extracting Hot Loading, Web Workers, … Slimming the Webpack core while improving its API surface