Reduce JavaScript payloads with tree shaking

Click for: original source

Jeremy Wagner neat article about reducing the JavaScript in modern web applications. JavaScript is often compressed when sent over the network, meaning that the actual amount of JavaScript is quite a bit more after the browser decompresses it.

As of mid-2018, HTTP Archive puts the median transfer size of JavaScript on mobile devices at approximately 350 KB.

As far as resource processing is concerned, compression is irrelevant. 900 KB of decompressed JavaScript is still 900 KB to the parser and compiler, even though it may be ~300 KB when compressed.

JavaScript is an expensive resource to process. Unlike images which only incur relatively trivial decode time once downloaded, JavaScript must be parsed, compiled, and then finally executed. Byte for byte, this makes JavaScript more expensive than other types of resources.

Tree shaking is a form of dead code elimination.

Author explains:

  • What is tree shaking
  • How to find opportunities to shake a tree
  • How to use webpack to implement tree shaking in sample app
  • How to keep Babel from transpiling ES6 modules to CommonJS modules
  • About keeping side effects in mind
  • And how to import only what we need

And of course example code is included. Excellent read!

[Read More]

Tags web-performance javascript frontend