Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Otimizações em produção

Referente ao curso Performance Web I: otimizando o front-end

por Felippe Rodrigo Puhle
| 341.8k xp | 33 posts
Full-stack developer

Fala galera, tudo certo? :)

Sempre fiz as automações de otimizações em ambiente dev, seguindo mais ou menos o seguinte parâmetro:

-> projeto src -> otimizações -> projeto dst

Esse 'projeto' trata-se apenas do front-end, feito com Jekyll apenas para gerar o código estático e deixar o projeto pronto para integração. Porém, como funcionaria a automação com o projeto já integrado com o back-end(em um projeto Java, por exemplo)?

No caso, as minificações CSS e JS eu já fiz uma configuração de arquivos 'src' na raiz do projeto e o 'dst' em 'main/webapp'(diretório que torna-se visível), por exemplo:

  • /app/css/*.css => app/src/main/webapp/css/app.min.css
  • /app/js/*.js => app/src/main/webapp/js/app.min.js

Agora, sempre tive algumas dúvidas em relação ao ambiente de produção: como fica a questão de plugins com o usemin? Eles varreriam as próprias JSP no 'quente'? E as imagens enviadas de maneira dinâmica pelos usuários?

Obrigado galera, abraços!

4 respostas
solução!
por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Boa pergunta! O próprio alura aqui é um projeto Java e usamos as otimizações com gulp tbm. A ideia é que as coisas estáticas vc pode usar um Build step normal como vc falou mesmo. O usemin roda no jsp e já cheguei até a fazer htmlmin em jsp tbm (tem que tomar um pouco de cuidado mas rola).

Agora pras coisas dinâmicas vc vai precisar implementar no backend mesmo, tipo upload de imagens. Há soluções simples como plugin do tinypng pra Wordpress que otimiza as imagens. Mas hum backend próprio vc vai ter que implementar. Se rolar um NodeJS no Server por exemplo basta chamar o imagemin e pronto.

Outra solução é o uso do pagespeed module no servidor. Ou usar algum serviço de CDN que faça otimizações, tipo akamai etc.

por Felippe Rodrigo Puhle
| 341.8k xp | 33 posts
Full-stack developer

Que show Sergio!

Esta questão das imagens eu também otimizo com alguma lib externa, e esta situação da CDN é bem importante. Esta semana mesmo levantei um app no CloudFront(AWS) para trabalhar apenas com redimensionamento de imagens em um projeto com código-fonte único e diversos layouts.

Outra dúvida, há alguma integração do tipo 'ambiente de desenvolvimento ou produção' entre o projeto frontend e backend?

Por exemplo, existe algum local que você seta se está em dev ou production, e esta mesma config serve para ambos os lados?

Facilitaria bastante está situação de JSP 'src' e 'dst', além de melhor debug para Javascript. (Ficar debugando arquivo depois do uglify é osso!)

Eu estava pensando em setar no pom.xml e parsear o arquivo no gulpfile.

Obrigado, abraços!

por Sérgio Lopes
| 604.1k xp | 913 posts
Instrutor CTO na Alura

Aqui temos uma flag pra indicar se é dev ou produção sim. Fica no backend mesmo e ai cuspimos o valor no HTML pro JS ler tbm e fazer suas magicas.

por Felippe Rodrigo Puhle
| 341.8k xp | 33 posts
Full-stack developer

Show Sérgio. Sanou minhas dúvidas. Sobre 'como' vocês fazem isto vou deixar a critério de cada um testar e ver a melhor maneira para o seu projeto. Vou começar a integrar o meu!

Obrigado pela atenção, abraços!