Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Era of Module Bundlers - JSConf Belgium 2017

The Era of Module Bundlers - JSConf Belgium 2017

This talk will walk everyone through the concept and practical usage of JavaScript module bundling and optimisation. With the emergence of advanced bundling tools like Webpack, the JavaScript ecosystem has been enriched with the right set of processes and tools required for creating production-ready builds, which is what this talk aims at covering.
This talk will also cover essential differences between task runners and bundlers with focus on advanced optimisation techniques like Tree shaking and Code splitting.

Arun Michael Dsouza

June 29, 2017
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Technology

Transcript

  1. THE ERA OF MODULE BUNDLERS
    Arun Michael Dsouza
    Software Engineer, AdPushup Inc.
    github.com/arunmichaeldsouza
    twitter.com/amdsouza92
    JSConf Belgium 2017

    View Slide

  2. Arun Michael Dsouza
    New Delhi, India
    github.com/arunmichaeldsouza
    twitter.com/amdsouza92

    View Slide

  3. Ad Revenue Optimisation Platform
    adpushup.com
    Adblock Monetisation Platform
    adrecover.com

    View Slide

  4. THE ERA OF MODULE BUNDLERS
    http://bit.ly/Era-of-module-bundlers-demos

    View Slide

  5. Task Runners Module Bundlers

    View Slide

  6. JAVASCRIPT MODULES

    View Slide

  7. MAINTAINABILITY
    REUSABILITY
    EASE OF TESTING

    View Slide

  8. MODULE SYSTEMS IN JAVASCRIPT

    View Slide

  9. Immediately Invoked Function Expression

    View Slide

  10. http://bit.ly/block-scoping-es6

    View Slide

  11. Object Interface
    http://bit.ly/design-patterns-javascript

    View Slide

  12. AMD
    COMMON JS

    View Slide

  13. AMD
    math.js

    View Slide

  14. AMD
    app.js

    View Slide

  15. COMMON JS
    math.js

    View Slide

  16. COMMON JS
    app.js

    View Slide

  17. MODULE LOADERS
    Module
    Loader
    AMD
    Common JS

    View Slide

  18. REQUIRE JS
    AMD Module Loader
    http://bit.ly/require-js
    http://bit.ly/system-js
    SYSTEM JS
    Common JS / AMD Module Loader
    *demo

    View Slide

  19. http://bit.ly/require-js-examples

    View Slide

  20. MODULE BUNDLING
    Module
    Bundler
    Bundle
    Modules
    .css
    .js
    .js
    .png
    .scss

    View Slide

  21. View Slide

  22. HOW DO MODULE BUNDLERS WORK ?
    index.js
    data.js
    math.js
    api.js model.js
    db.js
    sql.js
    unit.js
    constants.js
    jsm.js
    Dependency Graph

    View Slide

  23. BROWSERIFY
    NPM modules on the browser side! Yay!

    View Slide

  24. View Slide

  25. View Slide

  26. INSTALLATION
    > npm install -g browserify
    USAGE
    > browserify app.js -o bundle.js
    *demo

    View Slide

  27. TRANSFORMS
    Babelify
    ES6 ES5
    http://bit.ly/browserify-transforms

    View Slide

  28. USING TRANSFORMS
    > browserify app.js -o bundle.js -t [ babelify --presets
    [ es2015 ] ]

    View Slide

  29. TASK RUNNERS

    View Slide

  30. View Slide

  31. BABELIFY TRANSFORM
    > npm install grunt grunt-browserify babelify babel-
    preset-es2015 —save-dev
    *demo

    View Slide

  32. WEBPACK

    View Slide

  33. INSTALLATION
    > npm install -g webpack
    USAGE
    > webpack app.js bundle.js

    View Slide

  34. WEBPACK CONFIG FILE
    *demo

    View Slide

  35. View Slide

  36. LOADERS
    Transform code from one form to another that
    is part of the bundle
    PLUGINS
    Act on the bundle or bundle chunks for
    customisation and optimisation
    *demo

    View Slide

  37. BUNDLE OPTIMISATION WITH WEBPACK

    View Slide

  38. BUNDLE ANALYSIS

    View Slide

  39. WEBPACK BUNDLE ANALYZERS
    http://bit.ly/webpack-bundle-analyzer
    http://bit.ly/webpack-chart
    http://bit.ly/webpack-visualizer
    NPM Module
    Web-based Analysers

    View Slide

  40. WEBPACK BUNDLE ANALYZER
    plugins: [
    new BundleAnalyzerPlugin( )
    ]
    *demo

    View Slide

  41. WEB-BASED BUNDLE ANALYZERS
    > webpack --profile --json > stats.json

    View Slide

  42. PRODUCTION READY BUNDLE

    View Slide

  43. UGLIFICATION
    *demo

    View Slide

  44. NODE ENVIRONMENT VARIABLE
    *demo

    View Slide

  45. WEBPACK PRODUCTION FLAG
    > webpack -p

    View Slide

  46. BUILD-TIME GZIPPING

    View Slide

  47. DYNAMIC GZIPPING

    View Slide

  48. BUILD-TIME GZIPPING
    > npm install compression-webpack-plugin --save-dev
    http://bit.ly/webpack-compression-plugin
    *demo

    View Slide

  49. View Slide

  50. TREE SHAKING
    Dead Code Elimination
    Works with ES2015 Modules

    View Slide

  51. babel-plugin-transform-es2015-modules-commonjs

    View Slide

  52. ES2015 MODULES (STATIC STRUCTURE)
    Can be tree-shaken
    COMMON JS & OTHERS (DYNAMIC STRUCTURE)
    Cannot be tree-shaken
    *demo

    View Slide

  53. CODE SPLITTING
    bundle.js
    styles.css page1.js page2.js

    View Slide

  54. CSS CODE SPLITTING
    App code with styles
    Separate CSS bundle
    Styles applied using tag<br/>css-loader<br/>style-loader<br/>Bundle with processed CSS<br/>ExtractTextWebpackPlugin<br/>

    View Slide

  55. INSTALLATION
    > npm install —save-dev extract-text-webpack-plugin
    USAGE
    *demo

    View Slide

  56. CODE SPLITTING LIBRARIES
    bundle.js
    JQuery
    Lodash
    App Code
    vendor.js
    JQuery Lodash
    bundle.js
    App Code

    View Slide

  57. COMMON CHUNKS PLUGIN
    http://bit.ly/common-chunks-plugin
    *demo

    View Slide

  58. IMPLICIT COMMON VENDOR CHUNK

    View Slide

  59. AUTOMATIC SPLITTING
    *demo

    View Slide

  60. ES2015 MODULES
    import
    export

    View Slide

  61. View Slide

  62. THANK YOU

    View Slide