Projeto do Curso de Otimização de Performance Web do Alura

Sobre o projeto:

Clone o projeto para depois configurarmos o docker.

Configurar a aplicação no Docker:

1. Cria o arquivo server.js para subir o servidor:

   var express = require("express");
   var app = express();
   var router = express.Router();
   
   var path = __dirname + '/site/';
   const PORT = 8080;
   const HOST = '0.0.0.0';
   
   router.use(function (req,res,next) {
   console.log("/" + req.method);
   next();
   });
   
   router.get("/",function(req,res){
   res.sendFile(path + "index.html");
   });
   
   app.use(express.static(path));
   app.use("/", router);
   
   app.listen(PORT, HOST);
   console.log(`Running on http://${HOST}:${PORT}`);

2. Cria o arquivo Dockerfile

3. Cria o arquivo docker-compose.yml

4. Adaptar o arquivo package.json adicionando as dependências:

   {
       "devDependencies": {
           "nodemon": "^1.18.10"
       },
       "dependencies": {
           "ejs": "^2.6.1",
           "express": "^4.16.4",
           "mongoose": "^5.4.10"
       }
   }

5. Adaptar o arquivo .dockerignore para ignorar os arquivos abaixo:

   node_modules
   npm-debug.log

6. Criar o arquivo npm-shrinkwrap.json com o seguinte conteúdo:

   {
       "dependencies": {
           "graceful-fs": {
               "version": "4.2.4"
           }
       }
   }

7. Faça o build da sua aplicação para poder seguir com as aulas:

   docker-compose build

Aulas

Economizando bytes

• Porque otimizar o front-end?
• Motivos pra otimização
• Minificação
• Automação com Gulp
• Projeto & Ambiente
• Projeto: Minificação
• Projeto: gulp copy
• Servidor & GZIP
• Tamanho do download
• Servidor HTTP local
• Análise com DevTools
• Projeto: habilitar GZIP
• Revisão do conteúdo
• Para saber mais: Brotli
• Transcrição das aulas

Otimizações de Imagens

• O peso das imagens
• Otimizações lossless
• Imagens grandes
• O melhor formato
• O melhor formato 2
• Otimizações lossy
• SVGs otimizados
• Otimização lossless
• Otimização lossy
• Automação das otimizações
• Projeto: redimensionar imagens
• Projeto: otimizar imagens
• Harmonia na equipe
• Para saber mais: ferramentas de otimização de imagens
• Para saber mais: por trás dos formatos de imagens
• Transcrição das aulas

O custo dos requests

• Custo dos requests
• Conexões simultâneas
• Análise dos requests no DevTools
• Projeto: diminuindo dependências
• Deploy no Google App Engine
• Mão na massa: deploy no App Engine
• Análise de performance
• WebPageTest
• PageSpeed Insights
• (opcional) Analise outro site
• Transcrição das aulas

Concatenações & Trade-offs

• Concatenação do CSS
• Mais concatenação e trade-offs
• Por que?
• Concatenação de CSS
• Concatenação de JS
• Transcrição das aulas

Sprites

• Porque Sprites
• Sprites PNG
• Automação de Sprites
• Projeto: sprites CSS
• Sprites em SVG
• Automação de Sprites SVG
• Projeto: sprite SVG
• (opcional) Polyfill para símbolos SVG
• (opcional) Outras sprites SVG
• Transcrição das aulas

Inline de recursos

• Inline de recursos
• O tamanho real do HTML
• Tamanho do HTML
• Projeto: inline de JS
• Projeto: inline de SVG
• Transcrição das aulas

Paralelizando requests

• Requests paralelos
• Impactos da paralelização
• Porque paralelizar?
• Hostname paralelo
• Análise do impacto
• Transcrição das aulas

Cache HTTP

• Cache com Expires
• Prática do cache
• Fingerprint dos assets
• Cache alto nos servidores
• Projeto: revisões com gulp
• Cache no GAE
• Cache no nginx
• Transcrição das aulas

Conclusão

• Análise final
• Atalho no gulp
• Sua análise final
• Transcrição das aulas
• Performance é UX

Notas das aulas:

• Projeto: Minificação
  No arquivo Dockerfile adicione o comando de instalação do gulp-cli:

  RUN npm install -g gulp-cli

  Criar rotas para visualizar o 'original' e a versão 'modificada' com gulp no servidor server.js:

  var dist_path = __dirname + '/dist/';
  ...
  router.get("/original",function(req,res){
  res.sendFile(path + "index.html");
  });
  
  router.get("/modificada",function(req,res){
  res.sendFile(dist_path + "index.html");
  });
  ...

  Entrar na bash e executar o comando de minificar:

  docker-compose run --rm web bash gulp minify

  Subir a aplicação e verificar a original e a modificada

• Projeto: gulp copy Na bash do seu container remova a pasta 'dist/assets' e depois 'minifique', para isso rode:

  rm -rf dist/assets/
  
  gulp copy minify

Permissões de arquivos:

Ao se adicionar libs ou qualquer outro comando que crie arquivos dentro do contâiner Docker o proprietário para edição se torna o contâiner, sendo assim você precisará rodar o comando abaixo para alterar essas permissões e você poder editar:

sudo chown -R $USER:$USER .

Exigências

⚠️ Atenção: É necessário que os desenvolvedores usem o Docker no seu ambiente de desenvolvimento.

• 🛠 Modo Desenvolvimento Docker
  • 💻 Linux Ubuntu LTS
  • 🐳 Docker Deve estar instalado.
  • 🐳 Docker Compose Deve estar instalado.
  • 💡 Dica: Documentação do Docker

Instalando

🐳 Modo Desenvolvimento com Docker

Após instalar o docker e docker-compose, estando na pasta raiz do projeto, execute:

docker-compose up

Para se certificar que os seus containers subiram corretamente, todos os containers deve estar com o status UP, execute:

docker-compose ps -a

Para acessar o container da aplicação, execute:

docker-compose run --rm web bash

Para derrubar e subir a instância do docker novamente, execute:

docker-compose down && docker-compose up

Para visualizar o sistema basta acessar no navegador no endereço: localhost:3000

Referências utilizadas

1° Repositório para clonar o projeto inicial

2° Performance Web I: otimizando o front-end

3° Criar um projeto com Node + Docker

4° Como Construir uma Aplicação Node.js com o Docker

5° Conteinerizando um aplicativo Node.js para desenvolvimento com o Docker Compose

6° ERRO: primordials is not defined