Como minificar o JavaScript: um guia passo a passo para desenvolvedores iniciantes

Índice:

1. Por que minificar o JavaScript? #
2. Os benefícios da minificação do JavaScript #
3. Minificação vs ofuscação #
4. Ferramentas online para minificar o JavaScript #
5. Reduza o JavaScript com outras ferramentas e serviços #

Por que minificar o JavaScript?

Como já mencionei, a minificação de código é uma maneira de melhorar o desempenho e a velocidade de suas páginas da web. Para demonstrar como é a minificação do JavaScript, dê uma olhada no exemplo de código a seguir, que é uma função de debounce comum do JavaScript:

 let doResizeResult = () => { console .log( window .innerWidth); } // main function let debounce = ( callback, delay ) => { let myTimeout; return () => { clearTimeout(myTimeout); myTimeout = setTimeout( () => { callback() }, delay); }; }; let doDebounce = debounce( () => doResizeResult(), 1000 ) window .addEventListener( 'resize' , () => doDebounce()); Linguagem do código: JavaScript ( javascript )

O código acima é fácil de ler, tem recuo correto, inclui espaços entre os operadores e espaçamento duplo entre certas linhas de código. Não é necessário escrever JavaScript dessa maneira, mas ajuda na legibilidade. Este exemplo também inclui um comentário no código.

Se eu usasse um minificador de JavaScript para minificar esse código, ele ficaria mais ou menos assim:

 let doResizeResult= () => { console .log( window .innerWidth)},debounce= ( e,d )=> { let n; return () => {clearTimeout(n),n=setTimeout( () => {e()},d)}},doDebounce=debounce( () => doResizeResult(), 1e3 ); window .addEventListener( "resize" ,()=>doDebounce()); Linguagem do código: JavaScript ( javascript )

Colei a versão fácil de ler do snippet de código em um minificador JavaScript on-line (veja os exemplos mais adiante). O minificador gerou outra versão do mesmo trecho de código – exceto que agora o código foi minificado. Isso significa que espaços desnecessários e quebras de linha são removidos para garantir que o código seja o menor possível. Nesse caso, também removeu o comentário do código.

Observe que você nunca reduziria o JavaScript que pretende editar e manter. Isso seria contraproducente. A minificação de JavaScript é para o código que você enviará por push para seu site de produção. Se você estiver trabalhando em JavaScript em um ambiente de desenvolvedor, mantenha intacta a versão pré-minificada do código.

Os benefícios da minificação do JavaScript

Para lhe dar uma ideia de quanto do tamanho do arquivo é salvo ao reduzir um snippet como o acima:

• Antes da minificação: 384 bytes
• Após minificação: 232 bytes

Isso seria apenas para minificação e não inclui outras formas de compactação como gzip. Isso também não usa uma forma de minificação que reduz o tamanho de nomes de variáveis, nomes de funções e outras partes do código. Agora imagine que esse tipo de melhoria é feito em centenas de linhas de código! Isso é um grande impulso para o desempenho do seu aplicativo apenas na minificação simples.

Isso deve demonstrar suficientemente por que você deseja examinar como minificar o JavaScript. Mas antes de chegar às ferramentas que você pode usar para reduzir o JavaScript, considerarei brevemente outro tópico relacionado.

Minificação vs ofuscação

Minificar o JavaScript não é o mesmo que ofuscar o JavaScript. Dito isto, é verdade que a minificação tornará seu JavaScript mais difícil de ler. Mas não é completamente “ofuscado” e é fácil embelezar (ou seja, “desminificar”) o código JavaScript. A ofuscação do JavaScript parece bem diferente.

Vamos voltar ao mesmo trecho da seção anterior. Aqui está a aparência desse snippet quando eu o executo por meio de um ofuscador de JavaScript on-line:

 var _0xc3ef=[ "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68" , "\x6C\x6F\x67" , "\x72\x65\x73\x69\x7A\x65" , "\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72" ]; let doResizeResult= () => { console [_0xc3ef[ 1 ]]( window [_0xc3ef[ 0 ]])}; let debounce= ( _0xf855x3,_0xf855x4 )=> { let _0xf855x5; return () => {clearTimeout(_0xf855x5);_0xf855x5= setTimeout( () => {_0xf855x3()},_0xf855x4)}}; let doDebounce=debounce( () => { return doResizeResult()}, 1000 ); window [_0xc3ef[ 3 ]](_0xc3ef[ 2 ],()=>{ return doDebounce()}) Linguagem do código: JavaScript ( javascript )

Embora algumas partes do código ainda estejam intactas, você pode ver que a maior parte do código é completamente diferente e ilegível.

O objetivo da ofuscação do JavaScript é não permitir que outros “roubem” o código, ao mesmo tempo em que o minimizam. Mas isso é um esforço inútil, já que o código pode ser tecnicamente “desofuscado”. Além disso, as tecnologias de front-end fazem parte da plataforma da Web aberta e, portanto, é difícil proteger o código JavaScript por meio de direitos autorais.

Assim, você pode minificar o JavaScript sozinho; A ofuscação do JavaScript é um exagero na maioria dos casos.

Ferramentas online para minificar o JavaScript

Agora que abordei o básico sobre por que você deseja reduzir o JavaScript e seus benefícios, vamos considerar algumas ferramentas on-line úteis. Isso permite que você converta instantaneamente código JavaScript regular em código minificado com apenas alguns cliques.

Muitas das ferramentas listadas funcionam de forma semelhante, mas diferem em como o código pode ser adicionado (por exemplo, via upload, entrada direta etc.). Além disso, algumas das ferramentas têm opções de configuração para tipos específicos de minificação, incluindo opções de ofuscação.

Minificador JavaScript Toptal

Este serviço minificador online da Toptal permite que você minifique seu JavaScript diretamente na página. Você também tem a opção de minimizá-lo por meio de uma solicitação POST usando sua API.

Ferramenta JavaScript Minify da Digital Ocean

A ferramenta Minify da Digital Ocean oferece várias definições de configuração diferentes, incluindo a capacidade de remover código não utilizado e instruções console.log() perdidas junto com a minificação. Você também pode escolher entre três predefinições de configuração para minificação mais rápida.

Minimizar

Minify é um minificador JavaScript simples que também reduz CSS. Você pode usá-lo diretamente online usando a ferramenta da página inicial ou como uma ferramenta CLI que permitirá reduzir e combinar vários arquivos. Este também inclui um conjunto de testes.

bundlejs

bundlejs é diferente das outras ferramentas de minificação de JavaScript nesta lista. Este permite que você teste interativamente qual será o tamanho dos seus pacotes depois de combinar e reduzir todos os seus pacotes. Você pode usá-lo como um minificador ou simplesmente como um verificador de tamanho de pacote, e possui várias opções de configuração.

JSCompress

JSCompress é um minificador JavaScript online que usa UglifyJS e babel-minify sob o capô. Essa ferramenta permite que você copie e cole seu JavaScript ou carregue um ou mais arquivos para combinar arquivos para minificação e compactação.

Minificador de JavaScript por FreeFormatter.com

Esta ferramenta de minificação online permite que você minifique copiando/colando diretamente ou por upload de arquivo. Você pode selecionar o tipo de codificação para o seu arquivo e este também ajustará os nomes das variáveis ​​no código para torná-los menores, para maior otimização.

Minimizar JS Online

Uma ferramenta simples para minificar o JavaScript via copiar/colar. Isso é tão simples quanto essas ferramentas podem ser e também inclui alguns testes de um clique que permitem ver como as bibliotecas JavaScript específicas são minificadas.

Minificador de JavaScript por BeautifyTools

Este minificador on-line reduzirá instantaneamente seu JavaScript e você terá a opção de inserir seu código de várias maneiras. Você pode copiar/colar, carregar via URL ou carregar um arquivo JavaScript local.

JS Minify

Essa ferramenta permite minificar por entrada direta ou você pode fazer upload de um arquivo JavaScript. De forma útil, você também tem a opção de marcar várias caixas para “mutilar” várias partes do código (semelhante à ofuscação) e manter comentários e citações originais.

Minimize o JavaScript com outras ferramentas e serviços

Na maioria dos casos, uma vez que o CMS ou o sistema de compilação do seu site esteja instalado, a redução do JavaScript é algo que você fará automaticamente, em vez de manualmente. Isso é possível por meio de plugins e ferramentas de construção, dependendo da sua configuração.

Por exemplo, se você executar um site WordPress, existem plug-ins que oferecem uma série de opções, incluindo cache de arquivos, compactação e, claro, minificação de CSS e JavaScript.

Se você usar uma das muitas ferramentas de compilação disponíveis, como Webpack, Parcel.js, esbuild, Snowpack e assim por diante, a minificação poderá ser feita automaticamente. Seu código de desenvolvimento não será minificado, mas sempre que você estiver pronto para enviar suas alterações para produção, seu novo código será criado automaticamente com os recursos selecionados, incluindo minificação de JavaScript.

Uma ferramenta popular que você pode usar ao minificar o JavaScript como parte de um processo de compilação é o UglifyJS, mencionado anteriormente. Este é um compressor/minificador completo que muitas ferramentas usam sob o capô e que você também pode usar.

Também existem redes de entrega de conteúdo (CDN) e serviços relacionados que permitem reduzir seu JavaScript automaticamente à medida que ele é servido em seu site. Isso é semelhante à otimização de imagem on-the-fly.

Um desses serviços é o JsDelivr. JsDelivr é um CDN rápido, gratuito para projetos de código aberto e otimizado para fornecer conteúdo JavaScript do npm e do GitHub. Conforme explicado em sua documentação:

Primeiro tentaremos localizar uma versão reduzida do arquivo…(removendo a extensão e procurando o mesmo arquivo .min.js ). Se não conseguirmos encontrar um, vamos nos minificar.

Isso fornece um forte desempenho por meio da própria entrega, juntamente com a minificação, se necessário.

Resumo de como minificar o JavaScript

Espero que as ferramentas e sugestões apresentadas acima ajudem você a entender como minimizar o JavaScript em seus sites e aplicativos e quais são os benefícios. Como mostrado acima, há várias ferramentas que você pode usar para minimizar seu JavaScript. Algumas delas são ferramentas online que você pode usar interativamente. Outros fazem parte de um sistema maior de criação de sites e, às vezes, usam um CMS.

Seja qual for o caso, a minificação do JavaScript beneficiará seus usuários, fornecendo conteúdo que carrega mais rapidamente, permitindo uma melhor experiência geral do usuário.