Por que Desativar Rocket Loader do Cloudflare (e Economizar Horas/Dias/Semanas de Debug)

O que é Rocket Loader?

Rocket Loader é uma “otimização automática” do Cloudflare que promete acelerar sua página adiando o carregamento de JavaScript. Sounds good, right? ERRADO.

A ideia é:

• Adiar scripts até a página renderizar
• Reordenar scripts “inteligentemente”
• Encapsular código em escopo isolado pra evitar conflitos

Na teoria: Página mais rápida. Na prática: Sua aplicação quebra de forma misteriosa.

O Problema Real

Rocket Loader foi feito pra sites estáticos modernos com bundlers (Webpack, Vite, etc). Mas se você tem código legado com jQuery, Bootstrap ou qualquer framework que dependa de variáveis globais, prepare-se para o caos.

Sintomas Clássicos

Uncaught ReferenceError: $ is not defined
Uncaught ReferenceError: jQuery is not defined
Cannot read properties of undefined

Você coloca jQuery bem no topo do HTML, mas mesmo assim:

• $ não está definido
• jQuery não está definido
• Modals não abrem
• Tooltips não funcionam
• AJAX não executa
• Sessions parecem quebrar

E o pior? Nenhum erro no console que explique por quê. Só “$ is not defined” e pronto.

Por que Isso Acontece?

1. Rocket Loader encapsula scripts em escopo isolado – jQuery carrega, mas $ não fica global
2. Reordena scripts de forma imprevisível – Seu código tenta usar jQuery antes dela estar pronta
3. Atrasa tudo demais – Código que deveria rodar no document.ready fica pendente

É tipo pedir uma bebida num bar e o bartender colocar ela num copo invisível.

A Solução: Desativar Rocket Loader

Via Dashboard Cloudflare

1. Vai em Rules → Page Rules
2. Clica Create Page Rule
3. Coloca a URL: seu-dominio.com/* (ou seu-subdominio.com/*)
4. Clica Add a Setting
5. Procura por Rocket Loader → Off
6. (Opcional) Desabilita também:
   • Auto Minify → Off
   • Polish → Off
   • Mirage → Off
7. Save and Deploy

Aguarda 5 minutos pra propagar.

Via API Cloudflare (mais rápido)

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/page_rules" \
  -H "X-Auth-Email: [email protected]" \
  -H "X-Auth-Key: sua-api-key" \
  -H "Content-Type: application/json" \
  --data '{
    "targets": [{"target": "url", "constraint": {"operator": "matches", "value": "seu-dominio.com/*"}}],
    "actions": [
      {"id": "rocket_loader", "value": "off"},
      {"id": "minify", "value": "off"},
      {"id": "polish", "value": "off"}
    ],
    "priority": 1,
    "status": "active"
  }'

Quando NÃO Desativar

Se você tem um site totalmente moderno com:

• Bundlers (Webpack, Vite)
• Framework moderno (React, Vue, Angular)
• Sem jQuery ou código legado global
• Nenhuma dependência de $ global

…aí talvez Rocket Loader funcione. Mas ainda assim, recomendo desativar e confiar no seu build tool ao invés de “otimizações mágicas”.

A Verdade Sobre “Otimizações” Automáticas

Cloudflare oferece várias “otimizações automáticas”:

• Rocket Loader
• Auto Minify
• Polish
• Mirage
• Mobile Optimization

A realidade? Elas causam mais problemas que resolvem em código real. A verdadeira otimização vem de:

• Código bem estruturado
• Lazy loading implementado corretamente
• CDN (que Cloudflare já oferece)
• Minificação no seu build (não automática)
• Caching estratégico

Conclusão

Rocket Loader é uma das piores “features” do Cloudflare justamente porque promete ajudar mas quebra tudo silenciosamente. Se você tem jQuery, Bootstrap ou qualquer código que depende de variáveis globais, DESATIVA AGORA.

Suas horas de debug valem mais que 0.3 segundos de “otimização”.

---

TL;DR: Rocket Loader quebra código legado. Desativa via Page Rules. Vida segue. 🤘