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.
http://www.frontend-rheinmain.de

Sebastian Werner

January 24, 2017
Tweet

More Decks by Sebastian Werner

Other Decks in Programming

Transcript

  1. Webpack Tuning
    January 24th 2017
    Sebastian Werner, Sebastian Software GmbH

    View Slide

  2. @swernerx
    @sebastiansoft
    github/sebastian-software
    Sebastian Werner

    View Slide

  3. 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

    View Slide

  4. Timing Matters
    Time Machine

    View Slide

  5. Time Machine
    Webpack == qooxdoo generator or jasy

    View Slide

  6. But these were implemented in Python…
    Time Machine

    View Slide

  7. …NodeJS is for the Youth
    Time Machine

    View Slide

  8. Some things were missing, some things were better…
    Time Machine

    View Slide

  9. Yep, better. 

    Just because it’s modern does not mean it’s good.
    Time Machine

    View Slide

  10. There is pretty amazing stuff though
    Time Machine

    View Slide

  11. Hot Reloading
    Generic Transpiling
    Plugin System
    Huge Community
    Developer Awareness

    View Slide

  12. Webpack
    Wise folks bet on good concepts

    View Slide

  13. View Slide

  14. Webpack Concepts
    Static Configuration

    View Slide

  15. Webpack Concepts
    Required by Features like:
    File Watching
    Fast Rebuilds

    View Slide

  16. Webpack Concepts
    Required by Features like:
    File Watching
    Fast Rebuilds
    and Hot Reloading Awesomeness

    View Slide

  17. Domain Specific Language
    qooxdoo
    Grunt

    View Slide

  18. API for Task Definition
    Jasy
    Gulp
    Fly
    Broccoli

    View Slide

  19. Everything is possible
    with Webpack
    Not a scam

    View Slide

  20. Nobody deeply
    understands Webpack
    We gonna fix that

    View Slide

  21. Everything is a Module
    Scripts / Styles / Images / Fonts

    View Slide

  22. Processing Required
    ES2017/TypeScript to ES5
    Sass/Less to CSS
    Asset Optimization
    Sprites
    Inlining

    View Slide

  23. HTTP/2
    Bundling is useful even in modern times

    View Slide

  24. NodeJS
    Bundling improves startup times and memory usage

    View Slide

  25. Cross Mime Imports
    Node does not support importing CSS / Assets
    Especially relevant for SSR (Universal Apps)

    View Slide

  26. Cherry Picking / Bundling
    Reduces API Surface + Parse Time + Memory Usage

    View Slide

  27. Basic Config

    View Slide

  28. Entry
    Initial entry point(s) of your application

    View Slide

  29. Module
    Any (virtual) file managed by Webpack

    View Slide

  30. Chunks
    Bundled set(s) of modules

    View Slide

  31. Loader
    Processes file content into preliminary output format

    View Slide

  32. 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

    View Slide

  33. Webpack Ecosystem

    View Slide

  34. 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

    View Slide

  35. Factory Helpers
    • Webpack Merge

    Specific deep object merge for custom configs
    • Webpack Blocks

    Shared/Reusable blocks of configuration

    View Slide

  36. Multi Threading
    • Happypack: 

    Running loaders in parallel

    View Slide

  37. Caching
    • Hard Source: 

    Advanced Caching for Modules

    (Waiting for Webpack v2 Support)

    View Slide

  38. Code Splitting
    • React Async Component: 

    Declarative code splitting with tweaks for SSR

    View Slide

  39. Chunk Info
    • Chunk Manifest Plugin: 

    Extracts hashes into external file

    View Slide

  40. News in Webpack v2
    See also: https://gist.github.com/sokra/27b24881210b56bbaff7

    View Slide

  41. Better Docs
    https://webpack.js.org/configuration/

    View Slide

  42. Native ES6 Modules

    View Slide

  43. Tree Shaking
    Not (yet) like Rollup with Scope Hoisting
    Not (yet) like Closure Compiler with Cross Bundle Code Motion

    View Slide

  44. import() API
    Relevant for Code Splitting / Dynamic Imports

    View Slide

  45. Cleaner Config & Validation

    View Slide

  46. Sponsoring

    View Slide

  47. View Slide

  48. View Slide

  49. Hints

    View Slide

  50. 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

    View Slide

  51. Hashing
    • Webpack Digest Hashing broken
    • Extract chunk hashes from initial chunk using
    Chunk Manifest Plugin
    • Base62 better than Hex
    • Eight characters are enough

    View Slide

  52. Transpiling
    • Transpile what is needed instead of everything
    • Babel Preset Env
    • For current browser only in development

    View Slide

  53. Duplication
    • Multiple versions are transparently used
    • Lodash vs. Lodash-ES vs. Lodash-XXX
    • Use ES2015 Imports! Really!

    View Slide

  54. 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

    View Slide

  55. Environment
    • Keep environment specifics local
    • Useful for API urls, database password, etc.
    • Ignore from Git

    View Slide

  56. 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.)

    View Slide

  57. Future

    View Slide

  58. Performance
    Most things are fast except loaders + optimization

    View Slide

  59. Caching
    Rebuilding the same code takes surprisingly long

    View Slide

  60. Hashing
    Permanent caching / CDN usage require stable hashes
    Chunk Manifest Digest Plugin + SHA256 + Base62

    View Slide

  61. Parallelism
    No built-in handling for multi core environments

    View Slide

  62. CSS Code Splitting
    Just not there. When extracting it’s always one chunk.

    View Slide

  63. Localization
    Nothing actively maintained.

    View Slide

  64. Permutations
    Efficiently built multiple variants / locales / environments

    View Slide

  65. JS Compression
    Built-in Uglify does not work with ES2015 outputs

    View Slide

  66. Better Tree Shaking
    After Webpack v2 use insights from 

    Rollup/Closure Compiler

    View Slide

  67. 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

    View Slide

  68. Open Source

    View Slide

  69. 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

    View Slide

  70. Thank You

    View Slide