gzip math fun

00-README.md

GZ Math Fun

$ for f in *.js; do echo $f - $(gzip $f -c | wc -c); done
example.js - 178
without-0.js - 173
without-1.js - 172
without-01.js - 170

We have four nearly identical code blocks at indexes 0, 1, 2, 3.

The experiment:

• All: 178 bytes
• Without 0: 173 bytes. Theoretically, 0 is 5 bytes
• Without 1: 172 bytes. Theoretically, 0 is 6 bytes
• Without 0 and 1: 170 bytes. Together, the actual removal reduces the total bundle by 8 bytes, which is less than 5 + 6 = 11 individually.

example.js

(function(modules) {})
([
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
function(module, exports) {

  document.querySelector("#content").innerHTML += foo("different");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("different");

}
]);

without-0.js

(function(modules) {})
([
,
function(module, exports) {

  document.querySelector("#content").innerHTML += foo("different");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("different");

}
]);

without-01.js

(function(modules) {})
([
,
,
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("different");

}
]);

without-1.js

(function(modules) {})
([
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
,
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("one");

},
function(module, exports, __webpack_require__) {

  document.querySelector("#content").innerHTML += foo("different");

}
]);