"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "o-dilema", "hProperties": { "id": "o-dilema" } }, "depth": 2, "value": "O dilema" }, { "data": { "id": "a-solução", "hProperties": { "id": "a-solução" } }, "depth": 2, "value": "A solução" }, { "data": { "id": "criar-o-wrapper", "hProperties": { "id": "criar-o-wrapper" } }, "depth": 3, "value": "Criar o wrapper" }, { "data": { "id": "lidar-com-os-retries", "hProperties": { "id": "lidar-com-os-retries" } }, "depth": 3, "value": "Lidar com os retries" }, { "data": { "id": "lidar-com-os-refreshes", "hProperties": { "id": "lidar-com-os-refreshes" } }, "depth": 3, "value": "Lidar com os refreshes" }, { "data": { "id": "múltiplos-componentes-lazy-na-mesma-página", "hProperties": { "id": "múltiplos-componentes-lazy-na-mesma-página" } }, "depth": 3, "value": "Múltiplos componentes lazy na mesma página" }, { "data": { "id": "conclusão", "hProperties": { "id": "conclusão" } }, "depth": 2, "value": "Conclusão" }]; const readingTime = { "minutes": 3, "words": 937, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info} = _components; if (!Info) _missingMdxReference("Info", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "o-dilema", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-dilema", children: _jsx(_components.span, { children: "#" }) }), "O dilema"] }), "\n", _jsx(_components.p, { children: "Hoje em dia, o desenvolvimento de software está a andar mais rápido sob a popular filosofia \"move fast and break things\". Não estamos a julgar - é simplesmente a forma como as coisas são. No entanto, este ritmo acelerado pode por vezes levar a problemas, especialmente no que diz respeito ao carregamento de componentes no React." }), "\n", _jsxs(_components.p, { children: ["Se estás a trabalhar num projeto que utiliza ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " para carregar componentes sob demanda, podes ter encontrado alguns problemas como ", _jsx(_components.code, { children: "ChunkLoadError" }), " e \"Falha ao carregar chunk\". Aqui estão algumas razões possíveis:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Há um problema de rede, por exemplo, a ligação à internet do utilizador está lenta ou instável." }), "\n", _jsx(_components.li, { children: "O utilizador está numa versão obsoleta da aplicação, e o navegador está a tentar carregar um chunk que já não existe." }), "\n"] }), "\n", _jsx(_components.p, { children: "Geralmente, um simples refresh da página pode resolver o problema, mas não é uma ótima experiência para o utilizador. Imagina que uma tela branca aparece quando o utilizador está a navegar para outra rota - não é uma boa imagem para a tua aplicação." }), "\n", _jsx(_components.p, { children: "Podemos equilibrar a necessidade de velocidade com a necessidade de uma experiência de utilizador suave? Claro. Deixa-me mostrar-te como (com TypeScript, claro)." }), "\n", _jsxs(_components.h2, { id: "a-solução", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#a-solução", children: _jsx(_components.span, { children: "#" }) }), "A solução"] }), "\n", _jsx(_components.p, { children: "Uma solução de força bruta pode ser guardar todas as versões dos chunks no servidor, assim não haverá mais o problema de \"chunk em falta\". À medida que a tua aplicação cresce, esta solução pode tornar-se inviável devido ao aumento das necessidades de espaço em disco, e ainda assim não resolve o problema da rede." }), "\n", _jsxs(_components.p, { children: ["Dado que um retry ou um refresh pode resolver o problema, podemos implementar estas soluções no nosso código. Já que o problema geralmente acontece quando o utilizador está a navegar para outra rota, podemos resolvê-lo sem que o utilizador perceba. Tudo o que precisamos é criar um wrapper à volta da função ", _jsx(_components.code, { children: "React.lazy" }), " que tratará dos retries e refreshes."] }), "\n", _jsx(_components.p, { children: "Já existem alguns ótimos artigos sobre como implementar este tipo de solução, por isso, vou focar-me na ideia e no funcionamento interno da solução." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["O código final está disponível neste ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repositório no GitHub" }), " e o pacote ", _jsx(_components.code, { children: "react-safe-lazy" }), " está\ndisponível no ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". O pacote está totalmente testado,\nextremamente portátil (minzipped ~700B), e pronto a ser usado no teu projeto."] }) }), "\n", _jsxs(_components.h3, { id: "criar-o-wrapper", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#criar-o-wrapper", children: _jsx(_components.span, { children: "#" }) }), "Criar o wrapper"] }), "\n", _jsxs(_components.p, { children: ["O primeiro passo é criar um wrapper à volta da função ", _jsx(_components.code, { children: "React.lazy" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Usar genéricos para garantir uma inferência de tipos correta\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "lidar-com-os-retries", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lidar-com-os-retries", children: _jsx(_components.span, { children: "#" }) }), "Lidar com os retries"] }), "\n", _jsxs(_components.p, { children: ["Para problemas de rede, podemos lidar com os retries envolvendo a ", _jsx(_components.code, { children: "importFunction" }), " numa função ", _jsx(_components.code, { children: "tryImport" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n let retries = 0;\n const tryImport = async () => {\n try {\n return await importFunction();\n } catch (error) {\n // Tentar até 3 vezes no máximo\n if (retries < 3) {\n retries++;\n return tryImport();\n }\n throw error;\n }\n };\n\n return lazy(async () => {\n return await tryImport();\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Parece simples, certo? Também podes implementar o algoritmo de ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "recuo exponencial" }), " para gerir os retries de forma mais eficiente."] }), "\n", _jsxs(_components.h3, { id: "lidar-com-os-refreshes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lidar-com-os-refreshes", children: _jsx(_components.span, { children: "#" }) }), "Lidar com os refreshes"] }), "\n", _jsx(_components.p, { children: "Para o problema de versões obsoletas, podemos lidar com os refreshes capturando o erro e refrescando a página:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...função tryImport\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Retorna um componente dummy para corresponder ao tipo de retorno do React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["No entanto, esta implementação é muito perigosa, pois pode causar um loop infinito de refreshes quando o erro não pode ser resolvido por um refresh. Enquanto isso, o estado da aplicação será perdido durante o refresh. Portanto, precisamos da ajuda do ", _jsx(_components.code, { children: "sessionStorage" }), " para guardar a mensagem de que já tentámos refrescar a página:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...função tryImport\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Limpa o sessionStorage quando o componente é carregado com sucesso\n sessionStorage.removeItem('refreshed');\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem('refreshed')) {\n sessionStorage.setItem('refreshed', 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Lança o erro se o componente não puder ser carregado após um refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Agora, quando capturamos o erro da função ", _jsx(_components.code, { children: "safeLazy" }), ", sabemos que é algo que não pode ser resolvido por um refresh."] }), "\n", _jsxs(_components.h3, { id: "múltiplos-componentes-lazy-na-mesma-página", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#múltiplos-componentes-lazy-na-mesma-página", children: _jsx(_components.span, { children: "#" }) }), "Múltiplos componentes lazy na mesma página"] }), "\n", _jsxs(_components.p, { children: ["Ainda há uma armadilha oculta na implementação atual. Se tiveres múltiplos componentes lazy na mesma página, o loop infinito de refreshes ainda pode acontecer porque outros componentes podem redefinir o valor do ", _jsx(_components.code, { children: "sessionStorage" }), ". Para resolver este problema, podemos utilizar uma chave única para cada componente:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...função tryImport\n\n // A chave pode ser qualquer coisa única para cada componente\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Limpa o sessionStorage quando o componente é carregado com sucesso\n sessionStorage.removeItem(storageKey);\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem(storageKey)) {\n sessionStorage.setItem(storageKey, 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Lança o erro se o componente não puder ser carregado após um refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Agora, cada componente terá a sua própria chave no ", _jsx(_components.code, { children: "sessionStorage" }), ", e o loop infinito de refreshes será evitado. Podemos continuar a aperfeiçoar a solução, por exemplo:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Reunir todas as chaves num array, de forma que só seja necessária uma chave de armazenamento." }), "\n", _jsx(_components.li, { children: "Definir um limite de refresh para refrescar a página mais de uma vez antes de lançar um erro." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Mas acho que já compreendes a ideia. Uma solução abrangente em TypeScript com testes e configurações está disponível no ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repositório do GitHub" }), ". Também publiquei o pacote ", _jsx(_components.code, { children: "react-safe-lazy" }), " no ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", para que possas usá-lo no teu projeto de imediato."] }), "\n", _jsxs(_components.h2, { id: "conclusão", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusão", children: _jsx(_components.span, { children: "#" }) }), "Conclusão"] }), "\n", _jsxs(_components.p, { children: ["O desenvolvimento de software é um trabalho delicado, e mesmo os menores detalhes podem exigir um esforço para serem resolvidos. Espero que este artigo te ajude a lidar graciosamente com os problemas do ", _jsx(_components.code, { children: "React.lazy" }), " e a melhorar a experiência do utilizador na tua aplicação."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }