Webpack Tuning

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

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