{"id":33,"date":"2022-12-10T23:38:38","date_gmt":"2022-12-11T02:38:38","guid":{"rendered":"https:\/\/criptografarphp.com.br\/site\/2022\/12\/10\/obfuscate-e-minify-arquivos-javascript-%e2%9c%85-ofuscate-e-minify-arquivos-javascript-%f0%9f%8c%90\/"},"modified":"2023-03-30T16:48:31","modified_gmt":"2023-03-30T19:48:31","slug":"obfuscate-e-minify-arquivos-javascript-%e2%9c%85-ofuscate-e-minify-arquivos-javascript-%f0%9f%8c%90","status":"publish","type":"post","link":"https:\/\/www.criptografarphp.com.br\/site\/obfuscate-e-minify-arquivos-javascript-%e2%9c%85-ofuscate-e-minify-arquivos-javascript-%f0%9f%8c%90\/","title":{"rendered":"OBFUSCATE e MINIFY Arquivos JavaScript \u2705 (Ofuscate e minify arquivos JavaScript) \ud83c\udf10"},"content":{"rendered":"\n<p>Aprenda a ofuscar e minificar (comprimir) seus arquivos JavaScript para reduzir seu tamanho quando compactados e torn\u00e1-los&#8230;<br \/>\n<iframe src=\"https:\/\/www.youtube.com\/embed\/O9a9aUfpjCM\" width=\"580\" height=\"385\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><br \/>\n00:12:09<br \/>\nAprenda a ofuscar e minificar (comprimir) seus arquivos JavaScript para reduzir seu tamanho quando compactados e torn\u00e1-los&#8230;<br \/>\nOl\u00e1 amigos do youtube se voc\u00ea \u00e9 um programador onseb certamente voc\u00ea j\u00e1 se deparou em algum momento com o problema de ser capaz de criptografar ou ocultar de alguma forma a fonte seu c\u00f3digo fonte de arquivos javascript ou bibliotecas que voc\u00ea est\u00e1 usando dentro de outro projeto certamente \u00e9 um problema que muitas vezes aconteceu com voc\u00ea e existem dois conceitos muito relacionados a isso, que s\u00e3o a mini fica\u00e7\u00e3o e a ofusca\u00e7\u00e3o, vamos entender neste v\u00eddeo o que consiste em cada um deles e como podemos mini ficar e tamb\u00e9m procurar um arquivo javascript para tamb\u00e9m o c\u00f3digo que temos escrito dentro de alguma forma voltando o mais seguro vamos ver como \u00e9 feito [M\u00fasica] bem vamos come\u00e7ar explicando o que \u00e9 a significa\u00e7\u00e3o ou como tamb\u00e9m \u00e9 conhecido minimiza\u00e7\u00e3o em que consiste esse Termo bem a minimiza\u00e7\u00e3o ou minha constru\u00e7\u00e3o do c\u00f3digo \u00e9 um processo muito comum que se utiliza antes da implanta\u00e7\u00e3o de uma aplica\u00e7\u00e3o web e que tem como finalidade eliminar todo o sup\u00e9rfluo do seu c\u00f3digo com o fim de torn\u00e1-lo mais compacto mais leve que pese portanto menos e carregue mais r\u00e1pido no seu navegador web este processo de vinifica\u00e7\u00e3o remova todos os espa\u00e7os desnecess\u00e1rios mudan\u00e7as de linha tabula\u00e7\u00f5es coment\u00e1rios tudo o que n\u00e3o traz funcionalidade do seu c\u00f3digo e que d\u00e1 um c\u00f3digo resultante bastante dif\u00edcil de ler, mas que ocupa muito menos espa\u00e7o e \u00e9 baixado mais r\u00e1pido do servidor para o seu navegador web existem v\u00e1rias ferramentas on-line para fazer isso vamos tentar um especificamente neste v\u00eddeo Agora que j\u00e1 conhecemos este conceito da minha constru\u00e7\u00e3o ou minimiza\u00e7\u00e3o vamos conversar sobre a ofusca\u00e7\u00e3o bem, por outro lado, temos a ofusca\u00e7\u00e3o que \u00e9 esta fus\u00e3o, embora o processo anterior do meu edifica\u00e7\u00e3o reduz o tamanho do seu c\u00f3digo e dificulta a sua leitura n\u00e3o impede de ver o c\u00f3digo original e isso vamos test\u00e1-lo tamb\u00e9m atrav\u00e9s do Google chrome o navegador que vou estar usando e tamb\u00e9m n\u00e3o impede que qualquer pessoa possa depurar o que possa l\u00ea-lo facilmente e at\u00e9 mesmo reutiliz\u00e1 &#8211; lo o processo de ofusca\u00e7\u00e3o \u00e9 um pouco mais complexo vai al\u00e9m e al\u00e9m do acima do objetivo que cumpre a mini fica\u00e7\u00e3o a ofusca\u00e7\u00e3o faz altera\u00e7\u00f5es no c\u00f3digo para ser realmente dif\u00edcil depurar o que e reutiliz\u00e1-lo o objetivo \u00e9 que o c\u00f3digo n\u00e3o pode ser copiado esta tarefa \u00e9 muito dif\u00edcil para este processo s\u00e3o realizadas v\u00e1rias tarefas como mudan\u00e7a de nomes de vari\u00e1veis e fun\u00e7\u00f5es recodifica\u00e7\u00e3o de cadeia substituindo parte do c\u00f3digo por outro c\u00f3digo equivalente, mas um pouco mais complexo e outras tarefas mais e bem vamos ver agora na pr\u00e1tica como isso \u00e9 feito para isso eu tenho aqui um projeto simples que vou abrir com o editor que vou usar neste v\u00eddeo que vai ser Visual Studio code \u00e9 um projeto bastante simples como voc\u00ea pode ver s\u00f3 \u00e9 composto de uma pasta html p\u00fablico dentro h\u00e1 um index.hr l bastante e temos tamb\u00e9m uma pasta para os arquivos js para os arquivos javascript que s\u00e3o dois \u00e9 index e opera\u00e7\u00f5es matem\u00e1ticas neste arquivo de opera\u00e7\u00f5es matem\u00e1ticas temos algumas fun\u00e7\u00f5es realmente b\u00e1sicas e simples que s\u00f3 v\u00e3o nos servir para exemplificar como somar subtrair multiplicar dividir e uma fun\u00e7\u00e3o que nos permite obter a m\u00e9dia tamb\u00e9m com base em uma lista de n\u00fameros com base em um arranjo e este arquivo opera\u00e7\u00f5es matem\u00e1ticas ponto j S estamos usando aqui neste arquivo index ponto j S j\u00e1 que estamos apenas fazendo uma chamada das fun\u00e7\u00f5es e n\u00f3s os mostramos por Console algo bastante simples e aqui eu tamb\u00e9m tenho os links das p\u00e1ginas web das ferramentas on-line que me permitir\u00e3o pesquisar e tamb\u00e9m significar o c\u00f3digo bem isso tamb\u00e9m estar\u00e1 dispon\u00edvel no reposit\u00f3rio no github que voc\u00ea pode encontrar na descri\u00e7\u00e3o deste v\u00eddeo o que eu vou fazer \u00e9 abrir esses dois links no navegador web que para esse assunto \u00e9 o Google chrome ent\u00e3o eu vou copi\u00e1-lo e eu vou dirigir para o meu navegador listoeb pronto aqui eu vou col\u00e1-lo este \u00e9 o link do motor de busca agora vamos abrir tamb\u00e9m o mini picador eu vou copiar no link e vamos para o navegador eu vou abri-lo em uma nova guia esses processos como eu expliquei s\u00e3o processos complementares n\u00e3o \u00e9 o mesmo significa que procurar e eu recomendo sempre que primeiro ofusca este arquivo e depois o mini fi que \u00e9 e \u00e9 arquivo final que \u00e9 um pouco criptografado e que tamb\u00e9m \u00e9 de alguma forma comprimido ou seja o que voc\u00ea pode usar em seu aplicativo web e o que eu vou fazer agora \u00e9 criar dentro da minha pasta js uma pasta chamada min onde v\u00e3o estar os arquivos j\u00e1 ofuscado significados com o mesmo c\u00f3digo que opera\u00e7\u00f5es matem\u00e1ticas mas o que fazer \u00e9 primeiro procur\u00e1-lo e depois mini ficarlo vamos fazer um pequeno exemplo s\u00f3 vou selecionar tudo com controles e s\u00f3 vou minimiz\u00e1-lo para que voc\u00ea veja o que acontece vou colocar aqui onde diz imputaba script ou vou colar apenas e aqui na parte inferior eu tenho um bot\u00e3o de mini ficarlo eu posso ver aqui main ifai eu clico e ele vai lan\u00e7ar o c\u00f3digo Mini ficcad ou ent\u00e3o este c\u00f3digo eu vou copi\u00e1 &#8211; lo eu vou para o visual Studio code e dentro eu vou criar um novo arquivo chamado opera\u00e7\u00f5es matem\u00e1ticas um domingo js a palavra e tamb\u00e9m \u00e9 simplesmente para magn\u00edfico do vou col\u00e1-lo e como vemos j\u00e1 \u00e9 um c\u00f3digo um pouco mais dif\u00edcil de ler j\u00e1 n\u00e3o \u00e9 t\u00e3o f\u00e1cil de entender a olho nu o que vou fazer \u00e9 dentro index ponto j s perd\u00e3o bom dentro d index.html Eu n\u00e3o vou mais fazer refer\u00eancia diretamente ao arquivo que n\u00e3o \u00e9 Mini fica do Mas eu vou acessar o que est\u00e1 dentro da pasta min \u00e9 matem\u00e1tica ponto j s vamos para o navegador agora para ver o resultado clique direito sobre index.hr ml copiar caminho idealmente seria implant\u00e1 &#8211; lo em um servidor web mas eu posso fazer isso tamb\u00e9m a partir da pasta que ele cont\u00e9m este arquivo por isso \u00e9 a forma que vamos usar dentro no navegador eu vou abrir uma nova aba e eu vou abrir aqui o meu site web bem este pequeno documento index.hu teme l eu vou dirigir agora clique com o bot\u00e3o direito inspecionar ou a tecla F 12 para acessar o console e eu vou ver isso me dizendo que somar n\u00e3o est\u00e1 definido mas isso acontece porque eu estou chamando incorretamente o arquivo lembre-se que \u00e9 opera\u00e7\u00f5es matem\u00e1ticas ponto min ponto j S agora sim ok vamos salvar voltamos para o navegador F5 ou controle f5 e agora se picado porque o c\u00f3digo resultante \u00e9 o mesmo da mesma forma que o arquivo ser\u00e1 chamado mos sem ter feito o processo de vinifica\u00e7\u00e3o e vamos verificar vou comentar esta linha e vou devolv\u00ea-lo como estava antes fazendo refer\u00eancia diretamente ao arquivo onde eu n\u00e3o fiz o processo de vinifica\u00e7\u00e3o est\u00e1 em sua nota que e est\u00e1 dentro aqui opera\u00e7\u00f5es matem\u00e1ticas ponto js para verificar porque eu posso ver que se de fato \u00e9 este arquivo vamos voltar para o explorador f5 e vemos que o mesmo resultado sai tanto quanto se usarmos o arquivo normal ou o arquivo Mini fica do f mas o que acontece eu vou fazer o exemplo eu vou devolv\u00ea-lo para o arquivo Mini picado eu vou comentar aqui esta refer\u00eancia e eu vou devolv\u00ea-lo o arquivo Mini fica 2 por dar retorno ao navegador efe 5 e vamos ver aqui nesta se\u00e7\u00e3o de source que pode haver aqui dentro js os arquivos correspondentes aqui eu vejo o arquivo min bom a pasta min e o arquivo opera\u00e7\u00f5es matem\u00e1ticas ponto mil ponto js se eu abri-lo eu posso ver que eu tenho o c\u00f3digo ponto j s Se eu pulsar, ent\u00e3o eu vou ver que o c\u00f3digo \u00e9 retornado como era e \u00e9 muito mais leg\u00edvel mais f\u00e1cil de entender qualquer um poderia l\u00ea-lo e estas s\u00e3o ferramentas que v\u00eam incorporadas em navegadores web modernos como o Google chrome firefox opera e at\u00e9 mesmo alguns mais bem ent\u00e3o este processo de vinifica\u00e7\u00e3o como voc\u00ea deve ter percebido n\u00e3o \u00e9 suficiente para esconder o funcionamento do seu c\u00f3digo ent\u00e3o o que vamos fazer agora \u00e9 que esse mesmo c\u00f3digo vamos primeiro ofuscar e depois mini ficar e vamos ver a diferen\u00e7a vamos voltar ao Visual Studio code e dentro do arquivo opera\u00e7\u00f5es matem\u00e1ticas ponto eu vou selecionar tudo eu vou apagar Eu vou deix\u00e1-lo eo c\u00f3digo original que est\u00e1 aqui eu vou selecion\u00e1-lo com controle e eu vou col\u00e1-lo agora primeiro no motor de busca Eu vou deixar esta se\u00e7\u00e3o em branco e vemos que ele me diz digite o c\u00f3digo javascript aqui eu col\u00e1-lo com controle v e eu vou clicar neste bot\u00e3o que diz Office kate ou pesquisa clique e eu posso ver o c\u00f3digo resultante um c\u00f3digo muito mais dif\u00edcil de ler este c\u00f3digo eu vou selecion\u00e1-lo ou com o mouse ou se n\u00e3o com controle para controle ce para copi\u00e1-lo clique direito copiar \u00e9 o mesmo e agora eu vou para o mini picador eu vou apagar este c\u00f3digo que eu tinha aqui eu vou colar o novo c\u00f3digo procurado e eu vou voltar a fazer o processo de vinifica\u00e7\u00e3o com o bot\u00e3o que eu tenho na parte inferior clique e eu vejo o c\u00f3digo resultante depois de ter procurado e mimi ficcad ou eu vou selecion\u00e1-lo um controle de controle ce para poder copiar vamos para o visual Studio code e col\u00e1-lo dentro do arquivo correspondente e eu vejo um c\u00f3digo mais dif\u00edcil de ver j\u00e1 estava primeiro ofuscado e depois mini fica com este c\u00f3digo \u00e9 com o qual vamos trabalhar ent\u00e3o vamos ver que em index.html estou fazendo refer\u00eancia a esse arquivo ent\u00e3o n\u00e3o h\u00e1 nenhum problema vamos voltar para o navegador para o aplicativo onde temos aqui o nosso c\u00f3digo famoso Console e agora o que eu vou fazer \u00e9 recarregar o conte\u00fado ou com controles 5 ou mas com a combina\u00e7\u00e3o de teclas control shifter ambos carregam nosso documento html fazendo uma refer\u00eancia limpa para os documentos externos neste caso o documento js que <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda a ofuscar e minificar (comprimir) seus arquivos JavaScript para reduzir seu tamanho quando compactados e torn\u00e1-los&#8230; 00:12:09 Aprenda a ofuscar e minificar (comprimir)&#8230;<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,2],"tags":[56,62,67,66,65,68,64,63],"acf":[],"_links":{"self":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/33"}],"collection":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":1,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":316,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/posts\/33\/revisions\/316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.criptografarphp.com.br\/site\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}