El funcionamiento interno de la construcción de Vite

Rate this content
Bookmark

Vite, el servidor de desarrollo ESM desagregado y el HMR rápido, son revolucionarios para la experiencia de desarrollo (DX). Pero Vite también brilla al construir tus aplicaciones en producción.

Esta charla profundizará en cómo encajan las piezas principales para empaquetar y minimizar tu código:

  • La construcción de Vite como una configuración de Rollup con opiniones.
  • Cómo se utiliza esbuild como un transpilador rápido de TS y JSX y un minificador.
  • El pipeline de plugins de producción.

Los frameworks modernos (Nuxt, SvelteKit, Astro, entre otros) han elegido Vite, mejorando la experiencia de desarrollo (DX) y las optimizaciones para su caso de uso objetivo.

Descubriremos Vite como un conjunto de herramientas pulido y extensible para crear aplicaciones modernas optimizadas.

This talk has been presented at DevOps.js Conf 2022, check out the latest edition of this JavaScript Conference.

FAQ

vidBuild es un proceso dentro de Vid que se enfoca en empaquetar y optimizar aplicaciones para producción, transformando módulos bajo demanda sobre ESM nativo y ofreciendo funciones como el reemplazo rápido de módulos, soporte para Typescript, JSX, PostCSS, entre otros.

Puedes probar vidBuild visitando la URL vid.new/vue en tu navegador, lo que te permitirá acceder a un entorno de desarrollo similar al local gracias a Stacklit, que ejecuta Node en el navegador utilizando contenedores web.

Cuando estés listo para la implementación, debes usar 'fit build' para empaquetar tu aplicación. Este proceso utiliza rollup internamente para optimizar y minimizar tus activos, y los archivos resultantes se almacenan en la carpeta 'dist'.

vidBuild optimiza la aplicación minimizando los archivos JS y CSS, aplicando división de código, precargando activos y usando hashing para almacenamiento en caché eficiente en el navegador. Además, cualquier importación dinámica se maneja automáticamente para optimizar la carga.

Puedes contribuir a Vid involucrándote en la clasificación de problemas, revisando pull requests (PR), o desarrollando nuevas funcionalidades. La comunidad es muy activa y acogedora, con muchos colaboradores trabajando juntos para mejorar el ecosistema de Vid.

vidBuild se distingue por su capacidad de iniciar el servidor de desarrollo instantáneamente sin necesidad de empaquetar previamente la aplicación, transformar los módulos bajo demanda y mantener un alto rendimiento de reemplazo de módulos independientemente del tamaño de la aplicación.

Matias Capeletto
Matias Capeletto
31 min
25 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Bienvenido a vidBuild, una herramienta que optimiza tu aplicación para producción al ofrecer una rápida sustitución de módulos y soporte para diversas tecnologías. El proceso de construcción en vidBuild implica optimizar y minimizar activos, empaquetar JS y CSS, y generar fragmentos para importaciones dinámicas. El pipeline en vidBuild incluye plugins para alias, resolución, módulos CSS y manejo de activos. Vid es una herramienta de construcción completa con un sistema de plugins flexible y soporte de una comunidad vibrante. La API de plugins de Vite es compatible con Rollup, y Vite busca la simplicidad mientras empuja la complejidad al sistema de plugins.
Available in English: The Inner Workings of Vite Build

1. Introducción a vidBuild

Short description:

Bienvenido a vidBuild. Exploraremos cómo vidBuild optimiza tu aplicación para producción. Vid ofrece un reemplazo rápido de módulos y soporte incorporado para Typescript, JSX, PostCSS, CSS modules y más. Brilla al construir tu aplicación para producción. Pruébalo en vid.new/vue, juega con la aplicación y experimenta el ciclo de retroalimentación rápida. Cuando estés listo para implementar, usa fit build para empaquetar tu aplicación con rollup.

♪♪♪ ♪♪♪ ♪♪♪ ♪♪♪ Bienvenido a vidBuild. Vamos a sumergirnos en el funcionamiento interno del proceso de vidBuild para entender cómo empaqueta y optimiza tu aplicación para producción. Primero un poco sobre mí. Soy Matías Capeleto, también conocido como Patak. Soy miembro del equipo principal de Vid y del equipo principal de Vitez, que es una nueva alternativa de JS nativa de Vid. También soy miembro del equipo de Vue, y ahora me uno al equipo de Stacklists para trabajar a tiempo completo en Vid y su ecosistema.

Entonces, ¿por qué Vid? Cuando hablamos de Vid, normalmente nos enfocamos en su servidor de desarrollo. Vid no empaqueta tu aplicación durante el desarrollo, por lo que el servidor se inicia instantáneamente. Vid transforma tus módulos bajo demanda sobre ESM nativo a medida que el navegador los solicita. Y al hacerlo, ofrece un reemplazo rápido de módulos que se mantiene rápido independientemente del tamaño de la aplicación. También obtienes soporte incorporado para Typescript, JSX, PostCSS, CSS modules y más, y una potente API de complementos basada en relab para extenderlo. Por ejemplo, para usar componentes de archivo único de Vue, u otros frameworks. Pero esto es solo la mitad de la historia. Vid también brilla al construir tu aplicación para producción, y ese será el enfoque de la charla.

Primero, vamos a probarlo. Puedes ir a vid.new slash vue en tu navegador y esto abrirá un playground de stacklit que va a bifurcar el inicio de vue en el repositorio de vid. Puedes ver que podemos jugar con la aplicación antes de que podamos terminar de explicar qué está sucediendo. Stacklit está ejecutando Node en el navegador utilizando contenedores web, lo que nos brinda una experiencia casi igual que nuestro entorno local. El tamaño de instalación de vid es realmente pequeño, por lo que la instalación fue muy rápida, y desde allí el servidor de vid se inició de inmediato ya que no es necesario empaquetar tu aplicación. El navegador solicitó el index.html, encontró un script de tipo módulo, y siguió solicitando los módulos de tu aplicación. Podemos ir a este primer módulo, y puedes ver que hay una importación para app.view. Este es un componente de archivo único de vista, y el navegador no sabe cómo procesarlo. Pero en vid.config.js, hemos configurado el complemento vid.js.plugin.view, y esto permite que vid comprenda los componentes de archivo único y le dé al navegador el js y CSS que comprende. Vamos a hello world.view y modifiquémoslo para que podamos ver cómo se activa el reemplazo de módulos en caliente. Cambiemos también algunos colores aquí, y puedes ver que tan pronto como guardamos, el cambio se reproduce al instante en el otro lado. El recuento también se mantiene, el estado se preserva. Y este ciclo de retroalimentación rápida es casi el mismo que obtienes al modificar algo con las herramientas de desarrollo del navegador, y es increíble trabajar así durante el desarrollo. Ahora cerremos el servidor de desarrollo. Y cuando estés listo para implementar tu aplicación, usa fit build para empaquetar tu aplicación para producción. Fit build utiliza internamente rollup para empaquetar todos los activos de tu aplicación.

2. Proceso de construcción y complementos internos

Short description:

De forma predeterminada, los activos se encuentran en la carpeta dist. Los archivos se optimizan y minimizan, y se les asigna un hash para un almacenamiento en caché sólido en el navegador. Vite, en el momento de la construcción, configura rollup con complementos de funciones como PostCSS e importación JSON. El proceso de construcción comienza con el punto de entrada index.html, extrayendo scripts y CSS. Los activos de JS y CSS se procesan, se agrupan y se minimizan. Vite admite la división de código y genera fragmentos para importaciones dinámicas. Otros activos como imágenes y videos también se procesan. Vite utiliza la API de complementos de Rollup para admitir funciones y optimización. Durante la construcción, se utilizan los complementos estándar de Rollup.

De forma predeterminada, se encuentran en la carpeta dist. Aquí puedes ver en los activos que se generó un index.js y ahora está optimizado y minimizado. Lo mismo ocurre con el CSS. Lo mismo ocurre con una imagen que se importó y se dividió un fragmento de proveedor de forma predeterminada. En el archivo de salida index.html, podemos ver que ahora estamos importando el script index y este script va a importar el fragmento de proveedor. Para evitar la cascada de carga, lo estamos precargando aquí de inmediato. También estamos vinculando la hoja de estilo CSS. Todos estos archivos tienen un hash para que puedan ser almacenados en caché en el navegador.

Si queremos verificar la aplicación empaquetada, podemos llamar a vidpreview que va a cargar directamente la aplicación en localhost para jugar con ella. Y esto no utiliza el servidor VDev, sino directamente la aplicación optimizada. Bien, sigamos adelante.

Entonces, Vite en el momento de la construcción es una configuración de rollup con opiniones. Te brinda buenos valores predeterminados para los casos más comunes y configura rollup con complementos de funciones como soporte para PostCSS, importación JSON, WASM, WorldCard y complementos de anuncios para optimizar tu código, como la minimización utilizando ESBuild, la división de código, la precarga de activos, etc. El proceso de construcción comienza con el punto de entrada index.html, como vimos, que se analiza para extraer los scripts y vincular CSS o hojas de estilo en línea. Las etiquetas de script o las importaciones apuntan a archivos TypeScript u otros tipos de archivos siempre y cuando Vite sepa cómo transpilarlos o se extienda con complementos de usuario para manejarlos, como vimos con el complemento de Vue. Lo mismo ocurre con el CSS. Tanto si están vinculados como si están en línea, se extraerán y se procesarán mediante el pipeline.

Una vez que los activos de JS o CSS se procesan mediante el pipeline y se agrupan, cada fragmento se minimiza y debemos reemplazar las etiquetas de script y enlace originales por ellos para crear el archivo de salida index.html para nuestra aplicación. Como vimos, Vite asigna un hash a estos archivos para un almacenamiento en caché sólido en el navegador y también se genera y precarga un fragmento de proveedor. Lo mismo ocurre con los estilos CSS, que se agruparán y optimizarán en consecuencia. Vite admite la división de código tanto para los activos de JS como para los de CSS, también de forma predeterminada. Cuando se encuentra una importación dinámica, se generará un fragmento Async.js y un fragmento de CSS para ella. La llamada de importación se instrumenta en el fragmento importador para precargar las dependencias y esperar la hoja de estilo CSS correspondiente. Otros activos como imágenes, videos y wasm que se importan también se procesan mediante el pipeline de construcción. Repasemos el pipeline de complementos internos para tener una idea de lo que hace Vite durante la construcción. La API de complementos de Rollup permite que Vite admita la mayoría de las funciones y optimizaciones de forma independiente como complementos independientes. Vite utiliza una versión extendida de esta API de complementos que funciona tanto en profundidad como en construcción, introduciendo nuevos hooks específicos de Vite, por ejemplo, para extender el servidor de profundidad o aumentar los límites de reemplazo de módulos en caliente. La mayoría de los complementos del ecosistema de Rollup son compatibles con Vite. Durante la construcción, estamos tratando con complementos estándar de Rollup, ya que el servidor de profundidad de Vite no está en la mesa. Los hooks más típicos que encontrarás al crear uno son Resolve.id, que te permite resolver una ruta de importación, por ejemplo, necesitamos resolver los nombres de los paquetes a su ubicación en los módulos de Node.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite is a next-generation build tool that leverages native ES modules for improved performance. It eliminates the need for bundling and improves hot module replacement. Vite provides an opinionated default configuration while still allowing advanced customization through plugins. It is framework agnostic and can be used for React and other applications. Vite is being adopted by Next.js and Create React App, and integration with Nuxt 3 offers significant speed improvements.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
React Day Berlin 2022React Day Berlin 2022
9 min
Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida
BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
React Day Berlin 2022React Day Berlin 2022
32 min
Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...
The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.
El Núcleo de Turbopack Explicado (Codificación en Vivo)
JSNation 2023JSNation 2023
29 min
El Núcleo de Turbopack Explicado (Codificación en Vivo)
Tobias Koppers introduces TurboPack and TurboEngine, addressing the limitations of Webpack. He demonstrates live coding to showcase the optimization of cache validation and build efficiency. The talk covers adding logging and memorization, optimizing execution and tracking dependencies, implementing invalidation and watcher, and storing and deleting invalidators. It also discusses incremental compilation, integration with other monorepo tools, error display, and the possibility of a plugin system for Toolpag. Lastly, the comparison with Bunn's Builder is mentioned.

Workshops on related topic

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.