OBFUSCATE e MINIFY Arquivos JavaScript ✅ (Ofuscate e minify arquivos JavaScript) 🌐

Aprenda a ofuscar e minificar (comprimir) seus arquivos JavaScript para reduzir seu tamanho quando compactados e torná-los…

00:12:09
Aprenda a ofuscar e minificar (comprimir) seus arquivos JavaScript para reduzir seu tamanho quando compactados e torná-los…
Olá amigos do youtube se você é um programador onseb certamente você já se deparou em algum momento com o problema de ser capaz de criptografar ou ocultar de alguma forma a fonte seu código fonte de arquivos javascript ou bibliotecas que você está usando dentro de outro projeto certamente é um problema que muitas vezes aconteceu com você e existem dois conceitos muito relacionados a isso, que são a mini ficação e a ofuscação, vamos entender neste vídeo o que consiste em cada um deles e como podemos mini ficar e também procurar um arquivo javascript para também o código que temos escrito dentro de alguma forma voltando o mais seguro vamos ver como é feito [Música] bem vamos começar explicando o que é a significação ou como também é conhecido minimização em que consiste esse Termo bem a minimização ou minha construção do código é um processo muito comum que se utiliza antes da implantação de uma aplicação web e que tem como finalidade eliminar todo o supérfluo do seu código com o fim de torná-lo mais compacto mais leve que pese portanto menos e carregue mais rápido no seu navegador web este processo de vinificação remova todos os espaços desnecessários mudanças de linha tabulações comentários tudo o que não traz funcionalidade do seu código e que dá um código resultante bastante difícil de ler, mas que ocupa muito menos espaço e é baixado mais rápido do servidor para o seu navegador web existem várias ferramentas on-line para fazer isso vamos tentar um especificamente neste vídeo Agora que já conhecemos este conceito da minha construção ou minimização vamos conversar sobre a ofuscação bem, por outro lado, temos a ofuscação que é esta fusão, embora o processo anterior do meu edificação reduz o tamanho do seu código e dificulta a sua leitura não impede de ver o código original e isso vamos testá-lo também através do Google chrome o navegador que vou estar usando e também não impede que qualquer pessoa possa depurar o que possa lê-lo facilmente e até mesmo reutilizá – lo o processo de ofuscação é um pouco mais complexo vai além e além do acima do objetivo que cumpre a mini ficação a ofuscação faz alterações no código para ser realmente difícil depurar o que e reutilizá-lo o objetivo é que o código não pode ser copiado esta tarefa é muito difícil para este processo são realizadas várias tarefas como mudança de nomes de variáveis e funções recodificação de cadeia substituindo parte do código por outro código equivalente, mas um pouco mais complexo e outras tarefas mais e bem vamos ver agora na prática como isso é feito para isso eu tenho aqui um projeto simples que vou abrir com o editor que vou usar neste vídeo que vai ser Visual Studio code é um projeto bastante simples como você pode ver só é composto de uma pasta html público dentro há um index.hr l bastante e temos também uma pasta para os arquivos js para os arquivos javascript que são dois é index e operações matemáticas neste arquivo de operações matemáticas temos algumas funções realmente básicas e simples que só vão nos servir para exemplificar como somar subtrair multiplicar dividir e uma função que nos permite obter a média também com base em uma lista de números com base em um arranjo e este arquivo operações matemáticas ponto j S estamos usando aqui neste arquivo index ponto j S já que estamos apenas fazendo uma chamada das funções e nós os mostramos por Console algo bastante simples e aqui eu também tenho os links das páginas web das ferramentas on-line que me permitirão pesquisar e também significar o código bem isso também estará disponível no repositório no github que você pode encontrar na descrição deste vídeo o que eu vou fazer é abrir esses dois links no navegador web que para esse assunto é o Google chrome então eu vou copiá-lo e eu vou dirigir para o meu navegador listoeb pronto aqui eu vou colá-lo este é o link do motor de busca agora vamos abrir também 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ão processos complementares não é o mesmo significa que procurar e eu recomendo sempre que primeiro ofusca este arquivo e depois o mini fi que é e é arquivo final que é um pouco criptografado e que também é de alguma forma comprimido ou seja o que você pode usar em seu aplicativo web e o que eu vou fazer agora é criar dentro da minha pasta js uma pasta chamada min onde vão estar os arquivos já ofuscado significados com o mesmo código que operações matemáticas mas o que fazer é primeiro procurá-lo e depois mini ficarlo vamos fazer um pequeno exemplo só vou selecionar tudo com controles e só vou minimizá-lo para que você veja o que acontece vou colocar aqui onde diz imputaba script ou vou colar apenas e aqui na parte inferior eu tenho um botão de mini ficarlo eu posso ver aqui main ifai eu clico e ele vai lançar o código Mini ficcad ou então este código eu vou copiá – lo eu vou para o visual Studio code e dentro eu vou criar um novo arquivo chamado operações matemáticas um domingo js a palavra e também é simplesmente para magnífico do vou colá-lo e como vemos já é um código um pouco mais difícil de ler já não é tão fácil de entender a olho nu o que vou fazer é dentro index ponto j s perdão bom dentro d index.html Eu não vou mais fazer referência diretamente ao arquivo que não é Mini fica do Mas eu vou acessar o que está dentro da pasta min é matemática ponto j s vamos para o navegador agora para ver o resultado clique direito sobre index.hr ml copiar caminho idealmente seria implantá – lo em um servidor web mas eu posso fazer isso também a partir da pasta que ele contém este arquivo por isso é 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ão direito inspecionar ou a tecla F 12 para acessar o console e eu vou ver isso me dizendo que somar não está definido mas isso acontece porque eu estou chamando incorretamente o arquivo lembre-se que é operações matemáticas 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ódigo resultante é o mesmo da mesma forma que o arquivo será chamado mos sem ter feito o processo de vinificação e vamos verificar vou comentar esta linha e vou devolvê-lo como estava antes fazendo referência diretamente ao arquivo onde eu não fiz o processo de vinificação está em sua nota que e está dentro aqui operações matemáticas ponto js para verificar porque eu posso ver que se de fato é 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ê-lo para o arquivo Mini picado eu vou comentar aqui esta referência e eu vou devolvê-lo o arquivo Mini fica 2 por dar retorno ao navegador efe 5 e vamos ver aqui nesta seção 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ções matemáticas ponto mil ponto js se eu abri-lo eu posso ver que eu tenho o código ponto j s Se eu pulsar, então eu vou ver que o código é retornado como era e é muito mais legível mais fácil de entender qualquer um poderia lê-lo e estas são ferramentas que vêm incorporadas em navegadores web modernos como o Google chrome firefox opera e até mesmo alguns mais bem então este processo de vinificação como você deve ter percebido não é suficiente para esconder o funcionamento do seu código então o que vamos fazer agora é que esse mesmo código vamos primeiro ofuscar e depois mini ficar e vamos ver a diferença vamos voltar ao Visual Studio code e dentro do arquivo operações matemáticas ponto eu vou selecionar tudo eu vou apagar Eu vou deixá-lo eo código original que está aqui eu vou selecioná-lo com controle e eu vou colá-lo agora primeiro no motor de busca Eu vou deixar esta seção em branco e vemos que ele me diz digite o código javascript aqui eu colá-lo com controle v e eu vou clicar neste botão que diz Office kate ou pesquisa clique e eu posso ver o código resultante um código muito mais difícil de ler este código eu vou selecioná-lo ou com o mouse ou se não com controle para controle ce para copiá-lo clique direito copiar é o mesmo e agora eu vou para o mini picador eu vou apagar este código que eu tinha aqui eu vou colar o novo código procurado e eu vou voltar a fazer o processo de vinificação com o botão que eu tenho na parte inferior clique e eu vejo o código resultante depois de ter procurado e mimi ficcad ou eu vou selecioná-lo um controle de controle ce para poder copiar vamos para o visual Studio code e colá-lo dentro do arquivo correspondente e eu vejo um código mais difícil de ver já estava primeiro ofuscado e depois mini fica com este código é com o qual vamos trabalhar então vamos ver que em index.html estou fazendo referência a esse arquivo então não há nenhum problema vamos voltar para o navegador para o aplicativo onde temos aqui o nosso código famoso Console e agora o que eu vou fazer é recarregar o conteúdo ou com controles 5 ou mas com a combinação de teclas control shifter ambos carregam nosso documento html fazendo uma referência limpa para os documentos externos neste caso o documento js que