webpack 4: Lighting the fire

webpack 4: LIGHTING THE FIRE - CODEFEST, RUSSIA 2018

Transcript

1. WEBPACK 4:
   THE FIRE
   PROSPER OTEMUYIWA | CODEFEST NOVOSIBIRSK, RUSSIA 2018
   LIGHTING
   

   View Slide

2. You mean I’m going to speak Russian?
   ..still learning to construct the Russian AST.
   

   View Slide

3. VIBRANIUM OPEN SOURCERER
   @unicodeveloper
   

   View Slide

4. GOOGLE DEVELOPER EXPERT
   @unicodeveloper
   

   View Slide

5. DEVELOPER ADVOCATE | COMMUNITY BUILDER
   forLoop Africa
   Laravel Nigeria
   Angular Nigeria
   Webpack Africa
   

   View Slide

6. webpack 4:
   LEGATO
   FIRST MAJOR RELEASE WITH A CODENAME
   CODENAME
   

   View Slide

7. “The pain that you’ve been feeling
   can’t compare to the joy webpack 4
   brings, @unicodeveloper is lighting
   the fire #codefestRussia2018”
   #TweetQuote
   

   View Slide

8. FASTER BUILD TIMES
   BY DEFAULT!
   Up to 98% faster than
   previous versions.
   

   View Slide

9. webpack 3
   2405ms
   webpack 4
   1388ms
   

   View Slide

10. ZERO CONFIG #0CJS
    BUNDLER! ⚓
    ...to enhance the
    developer experience.
    

    View Slide

11. #0CJS BUNDLER ⚓
    1. No need to define an entry point.
    2. No need to define an output.
    3. In fact, no need for a config file.
    Takes src/index.js file as the default entry point.
    Emits the bundle to dist/main.js file by default.
    

    View Slide

12. #0CJS BUNDLER ⚓
    Just Webpack away!
    

    View Slide

13. #0CJS BUNDLER ⚓
    Throws an error if ./src directory doesn’t exist.
    

    View Slide

14. BETTER DEFAULTS
    MODE OPTIONS
    PRODUCTION DEVELOPMENT
    

    View Slide

15. BETTER DEFAULTS
    MODE OPTION
    webpack.config.js
    

    View Slide

16. BETTER DEFAULTS
    MODE OPTION - SCRIPTS
    webpack.config.js
    

    View Slide

17. BETTER DEFAULTS
    MODE OPTION - DEVELOPMENT
    - Better runtime error messages
    - Fast incremental compilation
    - Better tooling for in-browser
    debugging
    

    View Slide

18. BETTER DEFAULTS
    MODE OPTION - PRODUCTION
    - Small output size
    - Fast code at runtime
    - Easy to use output assets
    - Omitting development-only code
    

    View Slide

19. ACCOMMODATING
    MORE MODULE
    TYPES
    .wasm, .mjs, .js, .json
    

    View Slide

20. “
    Webpack 4 - the
    Airbnb of module
    types for optimal
    web performance” -
    @unicodeveloper
    

    View Slide

21. MODULE TYPES - WEB
    ASSEMBLY OUT OF THE
    BOX
    - webassembly/experimental
    - import webassembly modules into
    your js apps to make it fast!
    

    View Slide

22. MODULE TYPES - WEB
    ASSEMBLY MAGIC
    

    View Slide

23. DLLS IN THE BROWSER?
    C# & WEBASSEMBLY?
    NOT POSSIBLE!!!
    

    View Slide

24. DLLS IN THE BROWSER?
    C# & WEBASSEMBLY?
    WITH WEBPACK, IT
    IS POSSIBLE!!!
    ✅
    

    View Slide

25. DLLS IN THE BROWSER?
    WEBPACK & BLAZOR
    https://blazor-demo.github.io
    PLAY WITH THE DEMO
    

    View Slide

26. MODULE TYPES - JSON
    TREE SHAKING
    import { succeed } from ‘./details.json’;
    REMOVE UNUSED CODE. DEAD CODE
    ELIMINATION
    

    View Slide

27. MODULE TYPES - JSON TREE
    SHAKING
    import { succeed } from ‘./details.json’;
    

    View Slide

28. OVERHAULED PLUGIN
    SYSTEM. FRESH!
    ❖ Monomorphic Hooks
    ❖ Lazy Compiling
    ❖ Easy Upgrade to New API
    

    View Slide

29. NEW PLUGIN SYSTEM
    ❖ Must provide a name when adding
    plugins.
    ❖ Register hooks by creating a new Hook
    object as property of the hooks object.
    ❖ The hooks object houses all hooks as
    property of the extensible class.
    

    View Slide

30. FAREWELL
    CommonsChunkPlugin
    

    View Slide

31. HELLO
    SplitChunksPlugin
    optimization.splitChunks
    optimization.runtimeChunk
    OUT OF THE BOX
    

    View Slide

32. PLUGIN PROFILING
    Webpack Plugin Profiling on
    Google Chrome
    

    View Slide

33. PLUGIN PROFILING
    IDENTIFY WHAT PLUGINS ARE TAKING UP YOUR CPU TIME
    

    View Slide

34. PLUGIN PROFILING
    Thanks to @samccone
    

    View Slide

35. Upgrade to webpack 4
    https://github.com/webpack/webpack.js.
    org/issues/1706
    https://medium.com/webpack
    

    View Slide

36. Upgrade to webpack 4
    The React Team is close to
    major upgrade.
    

    View Slide

37. ROAD TO
    webpack 5
    

    View Slide

38. CSS, HTML, FILE as module types
    CSS Code Splitting
    Multicore/ Multithreaded Builds
    WEBPACK 5? ⛷
    

    View Slide

39. WASM support to become stable
    Module disk cache between build processes
    CSS as a first class citizen
    WEBPACK 5? ⛷
    

    View Slide

40. THANKS, ANY QUESTIONS? I’M EVERYWHERE
    GITHUB MEDIUM TWITTER
    @unicodeveloper
    CODEPEN
    

    View Slide