Alexander Navarro
87ef39f0ac
Affected files: .obsidian/plugins/update-time-on-edit/data.json 01. Projects/Neardearla 2024/Construyendo Bajo Presión cómo armar el primer MVP de tu startup en 2024.md 01. Projects/Neardearla 2024/Desde la Web al Escritorio - Tauri.md 01. Projects/Neardearla 2024/Pasted image 20240411191813.png 01. Projects/Neardearla 2024/Pasted image 20240411192942.png 01. Projects/Neardearla 2024/Patrones de diseño el arma secreta de los desarrolladores expertos.md 04. Periodic/03. Monthly/2024-03.md 04. Periodic/03. Monthly/2024-04.md
35 lines
No EOL
1.1 KiB
Markdown
35 lines
No EOL
1.1 KiB
Markdown
---
|
|
created: 2024-04-11 15:30
|
|
updated: 2024-04-11 15:52
|
|
---
|
|
## Container / Presentational Pattern
|
|
|
|
- Contenedor de lógica
|
|
- Contenedor más chico que sólo se encarga de mostrar la información al usuario
|
|
|
|
## Satic Rendering
|
|
|
|
- Crear el renderizado al momento de compilación
|
|
|
|
## Static import
|
|
|
|
- Esto importa todo el código en un archivo final (bundle) de gran tamaño
|
|
|
|
## Mejorar tiempos de carga
|
|
|
|
### Import on interaction
|
|
|
|
No es necesario cargar todo de golpe, cargar cuando son necesarias:
|
|
|
|
- Eager: inmediatamente, el default
|
|
- Lazy (route-based): cuando el usuario cargo la ruta
|
|
- Lazy (on interaction): en respuesta a una acción del usuario (Ej: click)
|
|
- Lazy (in viewport): cuando el usuario scrollee cerca del componente
|
|
- prefetch: cargar cuando sea necesario, pero despues de lo cŕitico
|
|
|
|
Utilizar estrategias como `React.lazy` que permite separar JS en distintos chunhs y cargarlos bajo demanda
|
|
|
|
Utilizar librerías como IntersectorObserver para viewport lazy loading
|
|
## Misc
|
|
|
|
Long tasks: tareas que toman más de 50 milisegundos (se puede comprobar con dev tools) |