In che modo questo codice ottimizza la minificazione?

Question

Ho visto un certo codice here che aveva queste dichiarazioni di variabili:

var equestAnimationFrame = 'equestAnimationFrame', 
    requestAnimationFrame = 'r' + equestAnimationFrame, 

    ancelAnimationFrame = 'ancelAnimationFrame', 
    cancelAnimationFrame = 'c' + ancelAnimationFrame 

Secondo un commento sulla pagina, questo è quello di migliorare la minimizzazione, ma non riuscivo a capire come. Qualcuno può dirmelo? Grazie.

Answer 1

Non si tratta di migliorare la minificazione corretta: il codice in questione è un polyfill requestAnimationFrame. Ciò significa che proverà a diversi prefissi dei fornitori. Così a volte il codice sarà "requestAnimationFrame" (in minuscolo r) e talvolta con un prefisso fornitore come msRequestAnimationFrame.

Per questo motivo è stato creato dinamicamente, "equestAnimationFrame" è sempre presente ma potrebbe essere preceduto da "r" o "R".

La parte "migliorare minification" è perché invece di scrivere:

var requestAnimationFrame = window.requestAnimationFrame || 
          window.msRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.oRequestAnimationFrame || 

Corrono un ciclo for su ["ms","moz","o", "webkit"] e provare i prefissi. Ciò consente di risparmiare alcuni byte al meglio.

Qui è il codice che credo sia più chiara e fa la stessa cosa:

var base = "equestAnimationFrame" // the base string 
var alternatives = window["r"+base] || // try the basic option first 
['moz', 'ms', 'o', 'webkit'].map(function(x){ 
    return x+"R" + base; // all the options 
}).filter(function(x){ // check if in window 
    return x in window; 
})[0];