Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpack Tuning

Webpack Tuning

Hol das meiste aus dem Tooling. Vortrag gehalten bei der Frontend RheinMain am 24.01.2017.

Sebastian Werner

January 24, 2017

More Decks by Sebastian Werner

Other Decks in Programming


  1. 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
  2. Cross Mime Imports Node does not support importing CSS /

    Assets Especially relevant for SSR (Universal Apps)
  3. 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
  4. Boilerplates • Create React App: Webpack v1, no SSR, Good

 by people at Facebook • React Universally: Universal React + Webpack
 by Sean Matheson • Advanced Boilerplate: +PostCSS +Apollo +Redux
 by Sebastian Werner
  5. Factory Helpers • Webpack Merge
 Specific deep object merge for

    custom configs • Webpack Blocks
 Shared/Reusable blocks of configuration
  6. Tree Shaking Not (yet) like Rollup with Scope Hoisting Not

    (yet) like Closure Compiler with Cross Bundle Code Motion
  7. 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
  8. Hashing • Webpack Digest Hashing broken • Extract chunk hashes

    from initial chunk using Chunk Manifest Plugin • Base62 better than Hex • Eight characters are enough
  9. Transpiling • Transpile what is needed instead of everything •

    Babel Preset Env • For current browser only in development
  10. Duplication • Multiple versions are transparently used • Lodash vs.

    Lodash-ES vs. Lodash-XXX • Use ES2015 Imports! Really!
  11. 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
  12. Environment • Keep environment specifics local • Useful for API

    urls, database password, etc. • Ignore from Git
  13. 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.)
  14. 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
  15. Current Projects • Advanced Boilerplate:
 Universal React + Redux +

    Apollo + PostCSS • Rollup Plugin Rebase:
 Rollup plugin to flatten and copying non script sources • Pre-Publish:
 Rollup-based pre-publishing utility for libraries • PostCSS Smart Import
 Better importing for PostCSS • PostCSS Simple URL
 Plain and basic URL handling for PostCSS • S15E-JavaScript:
 Standard ESLint / Stylelint + Basic Gulp Tooling