Por que alguns sites fazem uma sopa de letrinhas com as funções?

Olá,

Eu estava aqui praticando com as minhas recém descobertas habilidades de devtools, quando reparei que em alguns sites as funções e os objetos são simplesmente letras, como no código abaixo:

    var qb, rb = {};
    function sb(b, c) {
        var d, e = n(c.createElement(b)).appendTo(c.body), f = a.getDefaultComputedStyle && (d = a.getDefaultComputedStyle(e[0])) ? d.display : n.css(e[0], "display");
        return e.detach(),
        f
    }
    function tb(a) {
        var b = l
          , c = rb[a];
        return c || (c = sb(a, b),
        "none" !== c && c || (qb = (qb || n("<iframe frameborder='0' width='0' height='0'/>")).appendTo(b.documentElement),
        b = qb[0].contentDocument,
        b.write(),
        b.close(),
        c = sb(a, b),
        qb.detach()),
        rb[a] = c),
        c
    }
    var ub = /^margin/
      , vb = new RegExp("^(" + Q + ")(?!px)[a-z%]+$","i")
      , wb = function(b) {
        return b.ownerDocument.defaultView.opener ? b.ownerDocument.defaultView.getComputedStyle(b, null) : a.getComputedStyle(b, null)
    };
    function xb(a, b, c) {
        var d, e, f, g, h = a.style;
        return c = c || wb(a),
        c && (g = c.getPropertyValue(b) || c[b]),
        c && ("" !== g || n.contains(a.ownerDocument, a) || (g = n.style(a, b)),
        vb.test(g) && ub.test(b) && (d = h.width,
        e = h.minWidth,
        f = h.maxWidth,
        h.minWidth = h.maxWidth = h.width = g,
        g = c.width,
        h.width = d,
        h.minWidth = e,
        h.maxWidth = f)),
        void 0 !== g ? g + "" : g
    }
    function yb(a, b) {
        return {
            get: function() {
                return a() ? void delete this.get : (this.get = b).apply(this, arguments)
            }
        }
    }

Eu aprendi aqui na Alura que é uma boa prática dar nomes semânticos a tags, funções, variáveis e etc, então porquê eles fizeram isso (os desenvolvedores do site) ?

Boa tarde, Wilton! Como vai?

Essa boa prática deve ser seguida durante o desenvolvimento. No entanto, uma vez que vc tenha terminado de desenvolver o seu código, antes de colocar ele em produção é boa prática passá-lo por um processo chamado em inglês de minify (minificação).

Minify é um termo de programação que se refere a um processo de remoção de caracteres desnecessários para que o código seja executado. Nesse processo, o objetivo é tornar o seu código o menor possível, visando ter um arquivo com tamanho reduzido. Então são removidos pulos de linha, espaços, etc, Também durante esse processo pode ser alterado o nome de variáveis e funções para nomes que sejam menores, como esses que vc viu no exemplo que postou.

Inclusive, aqui na Alura temos um curso sobre Gulp que é um dos principais automatizadores de tarefas (se não o principal e mais utilizado) para códigos de front-end. E dentre essas tarefas que ele pode automatizar, está esse processo que acabei de descrever.

Grande abraço e bons estudos!