Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Webpack Tuning

Webpack Tuning

Hol das meiste aus dem Tooling. Vortrag gehalten bei der Frontend RheinMain am 24.01.2017.
http://www.frontend-rheinmain.de

Sebastian Werner

January 24, 2017
Tweet

More Decks by Sebastian Werner

Other Decks in Programming

Transcript

  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

    UX
 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