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
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
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!
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
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
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
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
62. THANK YOU