JSON Tree Shaking lands in Webpack 4.0

Webpack is a popular tool for web developers. Primary a module builder for JavaScript, but used also for managing other assets like CSS and Images. Development on Webpack remains very active and in the major version 4 comes an interesting feature, JSON Tree Shaking.

Tree shaking has become a common practise in JavaScript development. It is an old technique useful in modern environments as well. The core idea is that any code that is not used during execution paths will be dropped from the source. This makes JavaScript bundles smaller as they only contain code that is needed.

JSON is the serialization format native to JavaScript and now available for virtually all popular programming languages. It is the most common data exchange format used for Web Development and has overtaken XML formats common in the beginning of the AJAX trend. JSON Tree Shaking in Webpack does the same thing as tree shaking, but for JSON data structures.

Unused parts of a JSON document are removed from the generated JavaScript bundle during the Webpack bundling process. For large configuration and data blurbs the savings can be significant, but on average JSON treeshaking will yield moderate performance and size savings for most applications. Nevertheless - any automatic improvements are welcome.

Webpack 4 is currently in Alpha and the JSON Tree Shaking just landed in A Pull Request recently. More details here: Tree shaking for JSON imported variables. 

See a video example below to see how JSON Tree shaking works in Webpack:

Written by Jorgé on Friday January 5, 2018

Permalink - Tags: javascript, webpack

« Exploiting Speculative Execution (Meltdown/Spectre) via JavaScript - Mining Bitcoins with browsers and JavaScript »