Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
  2. 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
  3. 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
  4. ES2015 MODULES (STATIC STRUCTURE) Can be tree-shaken COMMON JS &

    OTHERS (DYNAMIC STRUCTURE) Cannot be tree-shaken *demo
  5. CSS CODE SPLITTING App code with styles Separate CSS bundle

    Styles applied using <style> tag css-loader style-loader Bundle with processed CSS ExtractTextWebpackPlugin