No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Caracter铆sticas de Vite

3/19
Recursos

Ahora que conocemos la historia detr谩s de Vite vamos a ver sus principales caracter铆sticas, donde destaca la reinvenci贸n de muchos procesos, como la resoluci贸n de dependencias, la implementaci贸n con TS, el HMR, entre muchas otras funcionalidades.

Optimizacion de codigo

Vite optimiza muchos de los procesos por los que tiene que pasar el c贸digo, para de tal modo enfocarse en un mejor rendimiento y experiencia de desarrollo.

Pre-bundling

Es la etapa donde se estandarizan los m贸dulos, pues adapta m贸dulos en CommonJS o UMD al formato est谩ndar de ECMAScript.

Dependency resolving

Vite optimiza el proceso en que se obtienen librer铆as y m贸dulos estandarizados. Funciona de la siguiente manera:

  1. Utiliza un servidor est谩tico para exponer los archivos v铆a URL.
  2. Reemplaza los imports v铆a NodeJS por imports URL.
  3. Sirve los archivos de forma inteligente y con cache, para optimizar tiempo y procesamiento.

Hot module replacement (HMR)

El HMR es cuando se hace un cambio en el c贸digo y este se ve reflejado en el navegador casi de forma inmediata, sin perder el estado de la aplicaci贸n y sin tener que recargar el navegador. Esto nos otorga una mejor experiencia de desarrollo al ser m谩s r谩pido.

Importaci贸n de archivos

Nos otorgar谩 una importaci贸n de archivos simplificada. * Resuelve la importaci贸n sin necesidad de loaders. * Es simple de usar con archivos multimedia, estilos, c贸digo o con los preprocesadores m谩s comunes, incluyendo TypeScript.

Integraci贸n simple con TypeScript

TS es autom谩ticamente sin necesidad de una configuraci贸n adicional compatible con Vite. Aun as铆, podr谩s agregarle una configuraci贸n adicional que funcionara con cualquier librer铆a o framework.

Optimizacion para produccion

Te proporcionar谩 una serie de optimizaciones a la hora de transpilar para producci贸n o hacer lo que llamamos el build.

  • Permite tomar el control de la configuraci贸n. Podr谩s utilizar la configuraci贸n por defecto tanto en desarrollo como en producci贸n, o bien, podr谩s tener una configuraci贸n m谩s espec铆fica y controlada por ti.
  • La velocidad en desarrollo aumenta gracias a esbuild.
  • Optimiza el bundle de producci贸n gracias a Rollup. La importaci贸n de dependencias se hace de modo inteligente, es decir, resuelve los m贸dulos a emplear en el proyecto y predice hasta cierto punto los m贸dulos que van a seguir, para importarlos desde un inicio.

Soporte a Web Workers y Web Assembly

Los Web Workers son una caracter铆stica de JS que nos permite crear procesos alternativos al proceso principal. Implementarlos puede llegar a tener una configuraci贸n complicada, pero con Vite no, teniendo la posibilidad de importarlos de una manera espec铆fica y estar listos para ser usados. Aunque tambien existe la posibilidad de importar un archivo Web Assembly e invocarlo donde queramos que se ejecute.

Contribuci贸n creada por: Jofay Zhan Segura

Aportes 10

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃Г 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 estandarizar los m贸dulos
  • Los m贸dulos por muchos a帽os no estuvieron estandarizados hasta que apareci贸 el est谩ndar de ECMAScript con los es modules
  • A煤n existen muchos frameworks y librer铆as que se transpilan para formatos anteriores como ser
    • Common JS
    • UMD
    • AMD
  • Esto hace que haya muchas incompatibilidades en la web, lo que hace vite.js primero es convertirlo en un ES module

Dependency Resolving

  • Va a ayudar a optimizar el c贸mo se obtiene estas librer铆as y m贸dulos dentro de nuestro proyecto
  • Lo primero que hace Vite.js es generar un servidor de archivos est谩tico
    • Es decir, que va a tomar todos los archivos del proyecto y los va a hacer disponibles para acceder desde el navegador
    • De esta manera va a reemplazar los imports v铆a node.js por urls
  • Tambi茅n se asegura de servir los archivos de forma inteligente y con cach茅, para optimizar tiempo y procesamiento
    • Esto lo hace subdividiendo las dependencias y ordenando las importaciones para que todo est茅 listo para el momento de uso
    • Utiliza un cach茅 fuerte, el cual se asegura que los archivos se queden en el navegador a menos que se limpie la cach茅 del mismo

Hot Module Replacement (HRM)

  • Es hacer que ni bien se guarden los archivos en el editor autom谩ticamente se reflejen los cambios sin necesidad recargar el navegador sin perder el estado de la aplicaci贸n
  • Permite una mejor experiencia de desarrollo al ser mucho m谩s r谩pido que los convencionales

Integraci贸n simple con TypeScript

  • Desde el primer momento el proyecto de Vite tiene integraci贸n con TypeScript sin necesidad de alguna configuraci贸n adicional
  • Es opcional la configuraci贸n de TypeScript
  • Es totalmente utilizable con cualquier librer铆a o framework

Integraci贸n con frameworks

  • Soporte perfecto con Vue.js
    • Vite es desarrollado por el team de Vue.js por lo cual la integraci贸n es simple y completa
  • 脷til para usar JSX con Vue.js
  • Hace que sea extremadamente simple usar Vite con React.js

Integraci贸n de archivos

  • Resuelve la importaci贸n sin necesidad de loaders
  • Es simple de usar con archivos multimedia, de estilos, de c贸digo o con los pre-procesadores m谩s comunes, incluyendo TypeScript

Build Optimization

  • Permite tomar el control de la configuraci贸n
    • Es opcional el archivo de configuraci贸n para vite
  • Optimiza la velocidad en desarrollo gracias a esbuild
  • Optimiza el bundle de producci贸n gracias a rollup
    • Mediante el archivo de configuraci贸n de Vite se puede configurar el bundler de Rollup
  • Rollup al momento de optimizar hace la importaci贸n de dependencias de manera inteligente
    • Realiza la tarea de forma inteligente de saber cu谩les son los m贸dulos que utilizar谩 el proyecto y predecir hasta cierto punto cu谩les son los m贸dulos que van a seguir para importarlos de un inicio

Soporte a Web Workers y Web Assembly

  • Los web workers son una caracter铆stica de JavaScript para crear procesos alternativos al proceso principal de donde se ejecuta nuestra p谩gina web y estos tienen una configuraci贸n que puede ser tediosa
    • Con Vite nos permite 煤nicamente importar y utilizarlos
  • Vite.js nos permite Web Assembly importando los archivo e invoc谩ndolo de una cierta manera para que se ejecute
    • Si requiere inyectar alguna dependencia te permite realizarlo
    • Vite te facilita el uso a diferencia de vanilla JS

Con la salida de Vite Webpack se ver谩 obligado a mejorar o desaparecer谩.

Soy un usuario experimentado de Vite.js. En mi equipo lo usamos porque es mucho mas rapido que webpack

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!!!

Vite.js va ser lo pr贸ximo que use en mis proyectos

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

  • Usa un servidor est谩tico para exponer los archivos v铆a URL.
  • Reemplaza tus imports v铆a NodeJS, por imports URL.
  • Sirve los archivos de forma inteligente y con cach茅, para optimizar tiempo y procesamiento.

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

  • Realiza la recarga de la p谩gina, pero sin perder el estado de la aplicaci贸n.
  • Permite una mejor experiencia de desarrollo al ser mucho m谩s r谩pida que los convencionales.

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

  • 脷til para usar JSX con Vue.js
  • Hace que sea extremadamente simple usar Vite con React.js

Importaci贸n de archivos

  • Resuelve la importaci贸n sin necesidad de loaders
  • Es simple de usar con archivos multimedia, de estilos, de c贸digo o con los pre-procesadores m谩s comunes, incluyendo TypeScript.

Build Optimization

Optimizar para producci贸n

  • Permite tomar el control de la configuraci贸n
  • Optimiza la velocidad en desarrollo gracias a esbuild.
  • Optimiza el bundle de programaci贸n gracias a rollup.

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

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

solo dir茅 una palabra.... flutter
Excelente curso !!

Caracter铆sticas de VITE

  • Resoluci贸n de dependencias
    • Pre-bundling: agrega compatibilidad adaptando los m贸dulos CommonJS o UMD a el est谩ndar de ECMAScript: ES Modules
      • Esto significa que puedes utilizar c贸digo que utiliza CommonJS o UMD en una aplicaci贸n que utiliza m贸dulos de ECMAScript sin tener que hacer ning煤n trabajo adicional.
      • Vite.js se encarga de adaptar el c贸digo para que pueda ser utilizado en una aplicaci贸n que utiliza m贸dulos de ECMAScript de forma transparente para el usuario.
    • Dependency resolving
      • Usa un servidor est谩tico para exponer los archivos v铆a URL
        • Se accede a los archivos del proyecto a trav茅s de URL鈥檚
      • Reemplaza tus imports v铆a NodeJS por imports URL
        • En lugar de utilizar el sistema de m贸dulos de Node.js y el proceso de resoluci贸n de rutas de archivos, Vite.js utiliza un enfoque basado en URLs para la carga de m贸dulos y archivos en tus aplicaciones.
      • Sirve los archivos de forma inteligente y con cach茅, para optimizar el tiempo y procesamiento
        • Carga una vez los archivos y se almacenan en cach茅 para acceder m谩s r谩pido a la informaci贸n
      • Hot module replacement
        • Cuando se guardan los cambios en el editor de c贸digo se reflejan autom谩ticamente en el navegador
        • Se realiza la recarga de la p谩gina sin perder el estado de la aplicaci贸n
        • Permite una mejor experiencia de desarrollo al ser mucho m谩s r谩pido que el resto
      • Integraci贸n con TypeScript sin configuraciones adicionales
      • Integraci贸n con frameworks
        • Fue desarrollado con VUE.js
        • Muy f谩cil usar con React.js
      • Importaci贸n de archivos simplificada
        • Resuelve la importaci贸n sin necesidad de loaders
          • Vite.js es que utiliza un enfoque de importaci贸n din谩mica para resolver m贸dulos de JavaScript, lo que significa que no es necesario utilizar loaders o configurar manualmente los resolve.alias o resolve.extensions en la configuraci贸n de Webpack.
        • Es simple de usar con archivos multimedia, de estilos, de c贸digo o con los pre procesadores m谩s comunes (SASS, LESS, Stylus), incluyendo TypeScript
      • Build Optimization
        • Optimizar para producci贸n
          • Permite tomar el control de la configuraci贸n
          • Optimiza la velocidad en desarrollo gracias a esbuild
            • 鈥渆sbuild鈥 es un compilador de JavaScript r谩pido y ligero.
            • Esbuild es una herramienta de l铆nea de comandos que se utiliza para compilar archivos JavaScript y otros archivos relacionados (como archivos de configuraci贸n de TypeScript o archivos de hojas de estilo) a un formato compatible con los navegadores web
          • Optimiza el bundle de producci贸n gracias a rollup
            • Webpack descarga cada m贸dulo por separado y si uno depende de otro, hasta que se necesite, hace la petici贸n a 茅ste
            • Rollup descarga el m贸dulo y al notar que depende de otro, descarga autom谩ticamente el otro m贸dulo, de forma que al hacer la petici贸n 茅ste ya est谩 disponible.
              • Rollup es una herramienta de l铆nea de comandos que se utiliza para agrupar varios archivos JavaScript y otros archivos relacionados (como archivos de configuraci贸n de TypeScript o archivos de hojas de estilo) en un solo archivo, conocido como 鈥減aquete鈥 o 鈥渂undle鈥.
              • El bundle se puede utilizar para reducir la cantidad de solicitudes que se env铆an al servidor cuando se carga una aplicaci贸n web, lo que puede mejorar la velocidad de carga de la aplicaci贸n.
              • Vite.js se integra con Rollup para ofrecer un empaquetado r谩pido y eficiente de los archivos de la aplicaci贸n en la fase de producci贸n. Esto significa que puede construir su aplicaci贸n para producci贸n y obtener un paquete optimizado que se cargar谩 r谩pidamente en los navegadores.
        • Soporte a Web Workers y Web Assembly
          • Web Workers son una caracter铆stica de la plataforma web que permiten la ejecuci贸n de c贸digo JavaScript en un hilo separado del hilo principal del navegador. Esto puede ser 煤til para realizar tareas pesadas o costosas en t茅rminos de tiempo de procesamiento sin afectar el rendimiento de la interfaz de usuario de la aplicaci贸n.
          • Web Assembly es un lenguaje de m谩quina de alto nivel dise帽ado para ser utilizado en el contexto de la web y que se ejecuta directamente en el navegador. Se utiliza para optimizar el rendimiento de aplicaciones web y puede ser utilizado junto con JavaScript para mejorar la velocidad y el rendimiento de aplicaciones web complejas.

que grande vite