¿Similar a Crear-reaccionar-aplicación para sacudir árboles? pero más de cómo validar y corregir.
Así que he creado una biblioteca de ganchos de reacción . Allí agregué un ejemplo para ayudarme a entender cómo funcionaría el movimiento de árboles.
import { useClock, useDeepState } from '@trajano/react-hooks'; export function App(): JSX.Element { useClock(); useDeepState("foo"); return <div>Hello world</div> } Sin embargo, hay una función llamada useAsyncSetEffect que agregué en la base de código de mi biblioteca, pero rastreando el código para useClock y useDeepState no presiono esa función en absoluto, pero cuando miro los archivos generados veo una referencia a useAsyncSetEffect .
No estoy realmente seguro de qué lo está causando, la biblioteca no es grande, por lo que el tamaño es solo un K comprimido, pero tengo curiosidad por saber por qué se incluye.
En package.json "módulo": "dist/index.modern.js",
Después de probar algunas cosas, descubrí que es una adición necesaria en el package.json de mi biblioteca. Como estoy construyendo tanto moderno como cjs usando
"build": "microbundle-crl --format modern,cjs",Genera una versión del código que hará uso del sistema de módulos. Dado que hace uso del sistema de módulos, es capaz de sacudir el árbol correctamente y reduje el código después.
44.62 KB (-11.02 KB) build\static\js\2.7a693cc3.chunk.js 800 B build\static\js\runtime-main.21ea8395.js 619 B (-601 B) build\static\js\main.21098aa9.chunk.jsPor cierto, también redujo el código en el fragmento 2. que alberga más código React y es bueno que haya reducido significativamente su tamaño en 11k
La nota sobre Evitar que babel transpile módulos ES6 a módulos CommonJS me proporcionó la pista necesaria. Además, como sé que mi código no tenía efectos secundarios, también agregué "sideEffects": false,