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.

C00289a7b57c00bb0ab55d5e04cc3345?s=128

Arun Michael Dsouza

June 29, 2017
Tweet

Transcript

  1. THE ERA OF MODULE BUNDLERS Arun Michael Dsouza Software Engineer,

    AdPushup Inc. github.com/arunmichaeldsouza twitter.com/amdsouza92 JSConf Belgium 2017
  2. Arun Michael Dsouza New Delhi, India github.com/arunmichaeldsouza twitter.com/amdsouza92

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

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

  5. Task Runners Module Bundlers

  6. JAVASCRIPT MODULES

  7. MAINTAINABILITY REUSABILITY EASE OF TESTING

  8. MODULE SYSTEMS IN JAVASCRIPT

  9. Immediately Invoked Function Expression

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

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

  12. AMD COMMON JS

  13. AMD math.js

  14. AMD app.js

  15. COMMON JS math.js

  16. COMMON JS app.js

  17. MODULE LOADERS Module Loader AMD Common JS

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

    JS / AMD Module Loader *demo
  19. http://bit.ly/require-js-examples

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

    .scss
  21. None
  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
  23. BROWSERIFY NPM modules on the browser side! Yay!

  24. None
  25. None
  26. INSTALLATION > npm install -g browserify USAGE > browserify app.js

    -o bundle.js *demo
  27. TRANSFORMS Babelify ES6 ES5 http://bit.ly/browserify-transforms

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

    --presets [ es2015 ] ]
  29. TASK RUNNERS

  30. None
  31. BABELIFY TRANSFORM > npm install grunt grunt-browserify babelify babel- preset-es2015

    —save-dev *demo
  32. WEBPACK

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

    bundle.js
  34. WEBPACK CONFIG FILE *demo

  35. None
  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
  37. BUNDLE OPTIMISATION WITH WEBPACK

  38. BUNDLE ANALYSIS

  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

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

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

  42. PRODUCTION READY BUNDLE

  43. UGLIFICATION *demo

  44. NODE ENVIRONMENT VARIABLE *demo

  45. WEBPACK PRODUCTION FLAG > webpack -p

  46. BUILD-TIME GZIPPING

  47. DYNAMIC GZIPPING

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

  49. None
  50. TREE SHAKING Dead Code Elimination Works with ES2015 Modules

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

  52. ES2015 MODULES (STATIC STRUCTURE) Can be tree-shaken COMMON JS &

    OTHERS (DYNAMIC STRUCTURE) Cannot be tree-shaken *demo
  53. CODE SPLITTING bundle.js styles.css page1.js page2.js

  54. CSS CODE SPLITTING App code with styles Separate CSS bundle

    Styles applied using <style> tag css-loader style-loader Bundle with processed CSS ExtractTextWebpackPlugin
  55. INSTALLATION > npm install —save-dev extract-text-webpack-plugin USAGE *demo

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

    Lodash bundle.js App Code
  57. COMMON CHUNKS PLUGIN http://bit.ly/common-chunks-plugin *demo

  58. IMPLICIT COMMON VENDOR CHUNK

  59. AUTOMATIC SPLITTING *demo

  60. ES2015 MODULES import export

  61. None
  62. THANK YOU