{"id":49213,"date":"2022-05-09T04:25:44","date_gmt":"2022-05-09T07:25:44","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=49213&preview=true&preview_id=49213"},"modified":"2024-08-21T05:54:13","modified_gmt":"2024-08-21T08:54:13","slug":"minificar-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/minificar-javascript\/","title":{"rendered":"Como Minificar o JavaScript? Ferramentas e M\u00e9todos Recomendados"},"content":{"rendered":"

A maioria dos usu\u00e1rios deseja uma experi\u00eancia de navega\u00e7\u00e3o elegante na web, e o JavaScript tem sido h\u00e1 muito tempo o favorito dos desenvolvedores para oferecer esta experi\u00eancia elevada.<\/p>\n

Entretanto, o JavaScript n\u00e3o est\u00e1 l\u00e1 apenas para fazer os sites parecerem mais bonitos. Ele tamb\u00e9m influencia diretamente o desempenho e o sucesso do site. Acelerar um site<\/a> ou reduzir o tempo de carregamento da p\u00e1gina – dois conceitos centrais para o desenvolvimento do JavaScript – s\u00e3o fatores cruciais para melhorar a experi\u00eancia do usu\u00e1rio.<\/p>\n

Confira nosso Guia em V\u00eddeo para Minicar JavaScript<\/a><\/h3>\n<\/kinsta-video>\n

Se voc\u00ea est\u00e1 procurando melhorar o desempenho do seu site dentro do menor prazo poss\u00edvel, voc\u00ea precisa se familiarizar com a minifica\u00e7\u00e3o do JavaScript. Isso o ajudar\u00e1 a excluir os caracteres desnecess\u00e1rios do seu c\u00f3digo fonte JavaScript sem alterar a sua funcionalidade. Al\u00e9m disso, ele ir\u00e1 reduzir o tempo de carregamento do seu site e o uso da largura de banda.<\/p>\n

A minifica\u00e7\u00e3o JavaScript pode ser complicada. Neste artigo, n\u00f3s vamos tra\u00e7ar um curso para ajud\u00e1-lo a minificar seu c\u00f3digo JavaScript para sites WordPress e n\u00e3o WordPress.<\/p>\n

<\/div><\/kinsta-auto-toc>\n\n

O que \u00e9 JavaScript?<\/h2>\n
\"JavaScript\"<\/a>
JavaScript (Fonte de imagem: M\u00e9dia<\/a>)<\/figcaption><\/figure>\n

JavaScript<\/a> \u00e9 uma linguagem de script orientada a texto para a cria\u00e7\u00e3o de sites interativos tanto no lado do cliente quanto no lado do servidor. \u00c9 uma linguagem mais simples e menos complexa de aprender do que a maioria, o que explica seu amplo uso.<\/p>\n

Enquanto HTML<\/a> e CSS<\/a> constroem a estrutura de um site, o JavaScript adiciona caracter\u00edsticas complexas que trazem interatividade ao seu site para engajar os usu\u00e1rios. Por exemplo, o JavaScript oferece elementos complexos como a jukebox de v\u00eddeo em rolagem, v\u00eddeos 2D\/3D, e mapas interativos.<\/p>\n

Notavelmente, os navegadores web podem entender JavaScript. Portanto, ao lado do HTML e do CSS, \u00e9 uma escolha proficiente escolher se voc\u00ea est\u00e1 interessado no desenvolvimento web. Se voc\u00ea precisa criar um site altamente interativo que roda em todos os navegadores sem qualquer obstru\u00e7\u00e3o, ent\u00e3o o JavaScript \u00e9 a op\u00e7\u00e3o mais confi\u00e1vel que voc\u00ea pode empregar.<\/p>\n

O que \u00e9 Minifica\u00e7\u00e3o de C\u00f3digo?<\/h2>\n

Minifica\u00e7\u00e3o tamb\u00e9m \u00e9 conhecida como minimiza\u00e7\u00e3o. Minifica\u00e7\u00e3o de c\u00f3digo significa otimizar o c\u00f3digo para economizar espa\u00e7o, reduzir o tempo de carregamento de p\u00e1ginas e diminuir o uso da largura de banda do site<\/a>. Entretanto, a maior preocupa\u00e7\u00e3o \u00e9 minificar o c\u00f3digo sem alterar a funcionalidade.<\/p>\n

A minifica\u00e7\u00e3o de c\u00f3digo \u00e9 poss\u00edvel em todas as principais tecnologias de programa\u00e7\u00e3o, incluindo HTML<\/a>, CSS<\/a> e – como estamos prestes a ver – JavaScript. Entretanto, o processo n\u00e3o \u00e9 instant\u00e2neo. Algum trabalho vai no sentido de tornar o c\u00f3digo mais compacto enquanto o mant\u00e9m funcional.<\/p>\n

Para minificar o c\u00f3digo JavaScript, voc\u00ea deve analis\u00e1-lo, comprimi-lo e obter a sa\u00edda. Uma vez minificado, ele deve ser quase ileg\u00edvel a olho nu. Voc\u00ea removeu todos os espa\u00e7os brancos desnecess\u00e1rios, coment\u00e1rios, novos caracteres de linha e tudo o que inicialmente tornou o c\u00f3digo leg\u00edvel.<\/p>\n

Voc\u00ea pode ter que fazer mais algumas mudan\u00e7as no c\u00f3digo tamb\u00e9m – por exemplo, inlining functions, removendo delimitadores de bloco, usando condicionantes impl\u00edcitos, ou reescrevendo vari\u00e1veis locais.<\/p>\n

Exemplos de c\u00f3digo JavaScript n\u00e3o Minificado vs Minificado<\/h3>\n

Vamos dar uma olhada em alguns exemplos de c\u00f3digo. Este primeiro bloco \u00e9 um JavaScript regular e n\u00e3o minificado:<\/p>\n

\/\/ program to check if the string is palindrome or not\n\nfunction checkPalindrome(str) {\n\n    \/\/ find the length of a string\n    const len = string.length;\n\n    \/\/ loop through half of the string\n    for (let i = 0; i < len \/ 2; i++) {\n\n        \/\/ check if first and last string are same\n        if (string[i] !== string[len - 1 - i]) {\n            return 'It is not a palindrome';\n        }\n    }\n    return 'It is a palindrome';\n}\n\n\/\/ take input\nconst string = prompt('Enter a string: ');\n\n\/\/ call the function\nconst value = checkPalindrome(string);\n\nconsole.log(value);<\/code><\/pre>\n
Agora, vamos ver como fica esse mesmo c\u00f3digo depois de miner\u00e1-lo:<\/p>\n
function checkPalindrome(n){const t=string.length;for(let n=0;n<t\/2;n++)\nif(string[n]!==string[t-1-n])return\"It is not a palindrome\";return\"It is a palindrome\"}\nconst string=prompt(\"Enter a string: \"), value=checkPalindrome(string);console.log(value);<\/code><\/pre>\n
Como voc\u00ea pode ver, o segundo bloco de c\u00f3digo \u00e9 muito menor e mais compacto. Isso significa que ele ir\u00e1 carregar e renderizar mais rapidamente, reduzindo o tempo de carregamento da p\u00e1gina e acelerando o conte\u00fado.<\/p>\n
Aqui, n\u00f3s reduzimos 529 bytes para 324 bytes, ganhando 205 bytes de espa\u00e7o livre e reduzindo a carga de p\u00e1ginas em quase 40%.<\/p>\n
\u00c9 como pegar um livro de 529 p\u00e1ginas e condens\u00e1-lo em um livro de 324 p\u00e1ginas. \u00c9 claro que um humano teria dificuldades para l\u00ea-lo, mas uma m\u00e1quina o aceleraria sem problemas.<\/p>\n
Ao conectar m\u00faltiplos arquivos JavaScript em um arquivo minificado individual, a minifica\u00e7\u00e3o de c\u00f3digo diminui o n\u00famero de solicita\u00e7\u00f5es HTTP para o servidor. Isto tamb\u00e9m reduz o consumo de banda do site. Al\u00e9m disso, a minifica\u00e7\u00e3o de c\u00f3digo diminui o tempo de execu\u00e7\u00e3o de um script – tudo o que reduz o seu Tempo para o Primeiro Byte (TTFB)<\/a>.<\/p>\n
Por que voc\u00ea deve minificar o c\u00f3digo JavaScript?<\/h2>\n
Enquanto escreve o c\u00f3digo inicial, a maioria dos desenvolvedores se concentra principalmente em conseguir fazer as coisas. Nesse caminho, eles tendem a usar muitos coment\u00e1rios, espa\u00e7amento e vari\u00e1veis para tornar o c\u00f3digo mais leg\u00edvel para outros que trabalham com ele no futuro.<\/p>\n
Apesar de ser uma excelente linguagem de programa\u00e7\u00e3o, o JavaScript causa impacto nas p\u00e1ginas da web ao torn\u00e1-las mais lentas. Para recuperar espa\u00e7o e melhorar a velocidade de carregamento de sua p\u00e1gina, voc\u00ea deve minificar o c\u00f3digo JavaScript.<\/p>\n
A vers\u00e3o minificada do c\u00f3digo JavaScript pode reduzir o tamanho do arquivo em at\u00e9 30-90%. Consequentemente, a minifica\u00e7\u00e3o do JavaScript tornou-se um ritual familiar para todos os desenvolvedores.<\/p>\n
Cada grande desenvolvedor de JavaScript Library<\/a> (Angular, Bootstrap, etc.) fornece uma vers\u00e3o minificada do JavaScript para a implanta\u00e7\u00e3o da produ\u00e7\u00e3o. E cada um usa uma extens\u00e3o min.js<\/strong> para indicar isso.<\/p>\n
Benef\u00edcios da minifica\u00e7\u00e3o do c\u00f3digo JavaScript<\/h3>\n
Aqui est\u00e1 um breve esbo\u00e7o dos benef\u00edcios que voc\u00ea alcan\u00e7ar\u00e1 ap\u00f3s empregar a minifica\u00e7\u00e3o JavaScript:<\/p>\n