"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-as-tentativas", "hProperties": { "id": "lidar-com-as-tentativas" } }, "depth": 3, "value": "Lidar com as tentativas" }, { "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": 931, "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á se movendo mais rápido sob a filosofia popular de \"mover-se rápido e quebrar as coisas\". Sem julgamentos aqui - é assim que as coisas são. No entanto, esse ritmo rápido pode, às vezes, levar a problemas, especialmente quando se trata de carregar componentes no React." }), "\n", _jsxs(_components.p, { children: ["Se você está trabalhando em um projeto que usa ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " para carregar componentes sob demanda, você pode ter encontrado alguns problemas como ", _jsx(_components.code, { children: "ChunkLoadError" }), " e ", _jsx(_components.code, { children: "Falha ao carregar o 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 conexão de internet do usuário está lenta ou instável." }), "\n", _jsx(_components.li, { children: "O usuário está em uma versão obsoleta do aplicativo e o navegador está tentando carregar um chunk que não existe mais." }), "\n"] }), "\n", _jsx(_components.p, { children: "Normalmente, um simples refresh da página pode resolver o problema, mas não é uma ótima experiência para o usuário. Imagine se uma tela branca aparecer quando o usuário está navegando para outra rota - não é uma boa aparência para o seu aplicativo." }), "\n", _jsx(_components.p, { children: "Podemos equilibrar a necessidade de velocidade com a necessidade de uma experiência suave para o usuário? Claro. Deixe-me mostrar 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 salvar todas as versões dos chunks no servidor, eliminando assim o problema do \"chunk ausente\". À medida que seu aplicativo cresce, essa solução pode se tornar inviável devido às crescentes exigências de espaço em disco, e ainda assim não resolve o problema da rede." }), "\n", _jsxs(_components.p, { children: ["Dado o fato de que uma tentativa ou um refresh pode resolver o problema, podemos implementar essas soluções em nosso código. Como o problema geralmente ocorre quando o usuário está navegando para outra rota, podemos resolvê-lo sem que o usuário perceba. Tudo o que precisamos fazer é criar um wrapper em torno da função ", _jsx(_components.code, { children: "React.lazy" }), " que lidará com as tentativas e os refreshes."] }), "\n", _jsx(_components.p, { children: "Já existem alguns ótimos artigos sobre como implementar esse tipo de solução, então vou me concentrar na ideia e nos detalhes internos 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á disponível no ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". O pacote é totalmente testado, extremamente portátil (minzipped ~700B) e pronto para ser usado em seu 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 em torno 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// Use genérico para a inferência correta de tipo\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "lidar-com-as-tentativas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lidar-com-as-tentativas", children: _jsx(_components.span, { children: "#" }) }), "Lidar com as tentativas"] }), "\n", _jsxs(_components.p, { children: ["Para problemas de rede, podemos lidar com as tentativas envolvendo a ", _jsx(_components.code, { children: "importFunction" }), " em uma 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 no máximo 3 vezes\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? Você também pode implementar o algoritmo de ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " para lidar com as tentativas de maneira 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ão obsoleta, podemos lidar com os refreshes capturando o erro e atualizando 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, essa implementação é muito perigosa, pois pode causar um loop infinito de refreshes quando o erro não pode ser resolvido por um refresh. Além disso, o estado do aplicativo será perdido durante o refresh. Portanto, precisamos da ajuda do ", _jsx(_components.code, { children: "sessionStorage" }), " para armazenar a mensagem de que tentamos atualizar 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 for 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 você tiver vários 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 esse problema, podemos usar 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 for 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á sua própria chave ", _jsx(_components.code, { children: "sessionStorage" }), " e o loop infinito de refreshes será evitado. Podemos continuar ajustando a solução, por exemplo:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Reunir todas as chaves em um array, assim, apenas uma chave de armazenamento é necessária." }), "\n", _jsx(_components.li, { children: "Configurar um limite de refresh para atualizar a página mais de uma vez antes de lançar um erro." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Mas acho que você entendeu 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 no 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 você possa usá-lo em seu projeto imediatamente."] }), "\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 até os menores detalhes podem exigir esforço para serem resolvidos. Espero que este artigo possa ajudá-lo a lidar graciosamente com os problemas do ", _jsx(_components.code, { children: "React.lazy" }), " e a melhorar a experiência do usuário do seu aplicativo."] })] }); } 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."); }