Características de Vite
Contenido del curso
Características de Vite
Contenido del curso
Fernando Quinteros Gutierrez
🧤 Características de Vite
Ideas/conceptos claves
Apuntes
**ES Modules**
Es el estándar ECMAScript para trabajar con módulos.
Resolución de dependencias
Prebuilding
es modulesDependency Resolving
Hot Module Replacement (HRM)
Integración simple con TypeScript
Integración con frameworks
Integración de archivos
Build Optimization
Soporte a Web Workers y Web Assembly
Róger Antonio Ordóñez Flores
Fenomenales apuntes Fernando. Muchísimas gracias por compartir.
Vinci Guerra
Con la salida de Vite Webpack se verá obligado a mejorar o desaparecerá.
Irving Juárez
create-react-app se tiene que actualizar o va ser reemplazado por Vite.js, que es creado por la comunidad de Vue.js btw
César Palma
Si, se están demorando si es que sacarán algo
Seba Cardoso
Soy un usuario experimentado de Vite.js. En mi equipo lo usamos porque es mucho mas rapido que webpack
Alvaro ramirez
pero que tan rapido? digamos cuanto tiempo te estas ahorrando ?
Seba Cardoso
Depende del proyecto, pero en nuestro caso es unas 5 veces mas rapido.
Gilbert Ardila
de acuerdo a todas las ventanas que trae Vite auguro que en un futuro muy próximo Vue.js va a crecer mucho en aceptación, a aprender Vue.js pues!!!
Mitchell Contreras
Características de Vite
Capacidad de resolución de dependencias
Pre-bundling
Agrega compatibilidad, pues adapta módulos en CommonJS o UMD, al formato estándar de ECMAScript, los ES Modules.
Dependency Resolving
Cuando recargamos la pagina los archivos quedan en la caché del navegador, esto permite que se sirvan inmediatamente y no tengamos que repetir solicitudes. Para borrar estos archivos necesitamos borrar cache para que vuelva a solicitarlos.
Hot Module Replacement (HMR)
Es básicamente que al guardar los cambios en nuestro editor podamos visualizarlos inmediatamente en nuestro navegador.
Actualización del navegador
Integración simple con TypeScript
Desde el momento 0 es compatible con typeScript
Puede agregarse archivo de configuración si lo deseamos
Integración con frameworks
Tiene integración perfecta con Vue.js (es desarrollado y mantenido por el core de Vue.js)
Soporte para JSX
Importación de archivos
Build Optimization
Optimizar para producción
Rollup esta diseñado para identificar que módulo A necesita el módulo B y ejecuta la descarga en paralelo para hacer uso eficiente del tiempo
!Captura de Pantalla 2022-07-09 a la(s) 11.07.43 a. m..png_11.07.43_a._m..png)
Soporte a Web Workers y Web Assembly
Web Workers: Son una característica de JS que nos permite crear procesos alternativos al proceso principal donde se ejecuta nuestra página web.
Los web workets tienen una configuración especifica y lo que permite Vite importar de una manera especifica y más sencilla para los programadores
WebAssembly: Es un formato de código binario portable, para la ejecución integrada en navegador de scripts del lado del cliente.
Lo que permite es una integración y ejecución sencilla de la forma normal de manilaJS
Irving Juárez
Vite.js va ser lo próximo que use en mis proyectos
Irving Juárez
El web worker es el service worker?
Jhony Grillet
Si, Un Web Worker es un tipo de Service Worker. Existen 4 tipos de Workers: Web (también llamado Page Worker), Push, Fetch e Idle Worker.
Lo leíste de un aguacate🥑
Carina Correjidor
Hola excelente explicacion. Me pasa que el HMR no me esta funconando porque no veo los cambios en mi navegador. Se debe configurar algo?
Diana Martinez
Eso es extraño, creo que necesitaría más información, porque debería funcionar.
Sergio Olivo Orellana
existe un curso actualizado de vite ??
Kenneth Angulo L
¿Puedo usar TypeScript sin configurar nada extra?
Sí, Vite tiene soporte nativo para TypeScript, JSX y CSS (incluyendo preprocesadores) directamente desde el primer momento. No necesitas pasar horas configurando loaders complejos o archivos de configuración interminables como ocurre en otras herramientas. Vite utiliza esbuild para transpilar TypeScript a JavaScript a una velocidad increíble. Sin embargo, es importante notar que Vite solo realiza la transpilación, no la verificación de tipos (type checking). Para la verificación de tipos, puedes confiar en tu editor de código (como VS Code) o ejecutar el compilador de TypeScript en la terminal durante el proceso de construcción.
Kenneth Angulo L
¿Por qué el servidor inicia casi instantáneamente?
El inicio casi instantáneo se debe a que Vite no empaqueta tu código fuente durante el desarrollo. En su lugar, sirve los archivos directamente al navegador utilizando Módulos ES nativos (ESM). El navegador asume el trabajo de resolver las importaciones y solo solicita los archivos que necesita para la pantalla actual. Los bundlers tradicionales como Webpack tienen que rastrear, procesar y empaquetar toda tu aplicación antes de poder iniciar el servidor, lo que se vuelve más lento a medida que el proyecto crece. Con Vite, el tiempo de inicio es siempre rápido, sin importar el tamaño de tu proyecto.
Jefred Bedoya
Vite redefine el desarrollo al eliminar el empaquetado inicial. Su servidor de desarrollo utiliza ESM nativo, logrando arranques instantáneos sin importar el tamaño del proyecto.
El Hot Module Replacement (HMR) es su motor principal, actualizando solo el módulo modificado en milisegundos. Además, su estrategia de compilación con Rollup garantiza optimizaciones de producción altamente eficientes y preconfiguradas.
GABRIEL NAVAS
solo diré una palabra.... flutter
Cristian Torres
Excelente curso !!
Fidel Parabacuto
Características de VITE
Bryan Figueroa
que grande vite