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.

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