$30 off During Our Annual Pro Sale. View Details »

webpack 4: Lighting the fire

webpack 4: Lighting the fire

webpack 4: LIGHTING THE FIRE - CODEFEST, RUSSIA 2018

Otemuyiwa Prosper

April 01, 2018
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

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