Javascript - Build

Some of the Highest rated features of javascript :

  1. Code spiting
  2. Dead Code Elimination
  3. Hot Module Reloading
  4. Real Time Operations
  5. Server Side Rendering
  6. Progressive Enhancement
  7. Optimistic Updates
  8. Time Travel Debugging
Top 3 of above are all related to build the javascript application. We discuss here now that how webpack helps us out to those problems?

Some of the build system, people are using :
  1. Webpack
  2. Grunt
  3. Gulp
  4. Browserify
Grunt (1) and Gulp (2) essential is the task runner. That runs the user defined tasks in user specified order. They do things little bit differently, where grunt is focused on configuration, gulp is focused on code. For example, tanspile es6 code, then run uni test, then run code analysis task and then....

Npm Script : This is a command line that you run in your shell. 

Bundlers :
  1. Browserify
  2. Webpack
  3. Roll up

Normally, UI based application have bunch of Js or ts files, styles ( .scss files), images files, third party packages and library. Bundles takes all of those files and create a production ready bundled static files. Bundler comes as handy, when you have lots of dependent modules.


  • bundle.js
  • bundledimg.png
  • bundle.css
Everything can be bundled :
  • .js
  • .jsx
  • ts
  • tsx
  • .css, .less 
  • .png, .svg
  • .json, .csv
Broader defination of the bundler is :
Javascript modules + jpg + png + css + json + whatever = bundles

Narrow definations of bunlders is, bundling dependent javascript modules. Dependent modules are imported with following ways :
  1. CommonJS module system : var myCommonJSModuleImported = require('my-module');
  2. ES2015 module system : import myES2015MouldeImported from 'my-module'
  3.  AMD module system : define['my-module', function(myAmdMouldeImported){})
Now, lets talk about the bundler:

  1. Browserify : "Browserify lets you require('modules') in the browser by bundling up all of your dependencies.". Not actively maintained.
  2. Rollup : Claims faster and smaller code. It implements tree shaking which eliminate the dead code. But it is still young in industry.
  3. Webpack : Its proven, has tree shaking, code spliting, supports all kind of module system, can bunlde in watch mode or hot reloading, and generate multi bundle. 
Bundlers are so much powerful with lots of plugins, loaders, optimizer, code splitter and dev tool prov

Ref : https://www.youtube.com/watch?v=C_ZtQClrVYw 

Comments

Post a Comment