Vite: Repensando las Herramientas de Frontend

Rate this content
Bookmark

Vite es una nueva herramienta de construcción que pretende proporcionar un flujo de trabajo más delgado, rápido y sin fricciones para la construcción de aplicaciones web modernas. Esta charla se sumergirá en el trasfondo del proyecto, la justificación, los detalles técnicos y las decisiones de diseño: qué problema resuelve, qué lo hace rápido y cómo encaja en el panorama de las herramientas JS.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Vite es una herramienta de construcción de próxima generación que incluye un servidor de desarrollo sin paquetes y un empaquetador de producción optimizado. Es ligero, rápido y utiliza valores predeterminados sensibles basados en la experiencia previa del autor con Vue CLI. Ofrece mejoras significativas en tiempos de inicio y carga en comparación con herramientas como Webpack y Rollup.

Vite ofrece varias ventajas: no requiere paquetización durante el desarrollo, lo que acelera los tiempos de inicio del servidor; carga módulos bajo demanda, lo que mejora la velocidad de carga inicial; y utiliza el almacenamiento en caché del navegador para optimizar las cargas de módulo. Además, implementa el reemplazo de módulos en caliente (HMR) de manera muy eficiente.

Vite optimiza el manejo de dependencias grandes mediante la pre-agrupación con ESBuild, transformando dependencias complejas en menos solicitudes HTTP. Esto reduce significativamente el tiempo de carga inicial y permite un almacenamiento en caché eficiente, manteniendo la eficiencia incluso en inicios de servidor posteriores.

Sí, Vite es agnóstico al framework, lo que significa que puede ser usado con cualquier framework de JavaScript, incluidos Vue, React y otros. Originalmente fue desarrollado para mejorar el servidor de desarrollo para Vue, pero su diseño y funcionalidades son aplicables de manera universal.

A pesar de la rapidez de ESBuild, Rollup ofrece una mayor madurez y flexibilidad en la división de código, que es crucial para aplicaciones de alto rendimiento. Rollup permite un control más detallado sobre la optimización del código, lo que resulta esencial para lograr el mejor rendimiento posible en la producción.

Vite mejora el rendimiento en producción mediante tecnologías avanzadas de pre-agrupación, minificación eficiente usando ESBuild o Terser según la configuración, y optimizaciones automáticas en la carga de fragmentos asíncronos y CSS. Estas estrategias aseguran tiempos de carga rápidos y un rendimiento robusto.

Evan You
Evan You
31 min
09 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Vite es una herramienta de construcción de próxima generación que aprovecha los módulos ES nativos para mejorar el rendimiento. Elimina la necesidad de agrupación y mejora el reemplazo de módulos en caliente. Vite proporciona una configuración predeterminada con opiniones mientras aún permite una personalización avanzada a través de plugins. Es agnóstico al marco y se puede utilizar para React y otras aplicaciones. Vite está siendo adoptado por Next.js y Create React App, y la integración con Nuxt 3 ofrece mejoras significativas de velocidad.
Available in English: Vite: Rethinking Frontend Tooling

1. Introducción a Vite

Short description:

Hola a todos. Hoy voy a hablar de Vite, una herramienta de construcción de próxima generación. Vite consta de un servidor de desarrollo sin paquetes y un empaquetador de producción. Es ligero, rápido y tiene opiniones propias. También es extensible y se preocupa por el recuento de dependencias y el tamaño de la carga útil. El rendimiento de Vite está influenciado por el amplio soporte para JavaScript moderno y los módulos ES nativos.

Hola a todos. Mi nombre es Evan Yeo y soy el autor de Vue.js y Vite. Hoy en esta charla, voy a hablar de Vite, una herramienta de construcción de próxima generación en la que he estado trabajando a principios de este año. Específicamente, quiero discutir algunos de los diseño compromisos involucrados en la creación de una nueva herramienta de construcción, por qué queremos hacer eso y qué implica.

¿Qué es Vite? Vite consiste principalmente en dos partes, un servidor de desarrollo sin paquetes que sirve sus archivos fuente a través de módulos ES nativos, y un empaquetador de producción que se basa en Rollout, está preconfigurado y produce compilaciones de producción altamente optimizadas. ¿Por qué querrías usar Vite en lugar de una herramienta existente? En primer lugar, es ligero y rápido. Realmente rápido. Veremos un ejemplo pronto. En segundo lugar, tiene opiniones propias con valores predeterminados muy sensibles. Se basa en la experiencia que he adquirido trabajando en Vue CLI, que es una herramienta de construcción muy utilizada para proyectos específicos de Vue a lo largo de los años. Similar a una configuración preconfigurada de Webpack y Webpack Dev Server. También es bastante similar en términos de alcance a Parcel. Muchas características comunes como TypeScript, JSX, y PostCSS funcionan directamente. A pesar de tener opiniones propias, sigue siendo muy extensible. Tiene una interfaz de plugin compatible con Rola que facilita la construcción sobre ella.

Entonces, para tener una idea de lo ligero que es, aquí hay un tweet de alguien ejecutando create react app y Vite lado a lado en Replit, que es un servicio que ejecuta tu proyecto en un contenedor remoto. El proyecto Vite es capaz de ponerse en marcha antes de que el proyecto CRA haya terminado de instalarse. Una de las razones por las que Vite es tan ligero es porque se preocupa por su propio recuento de dependencias y el tamaño de la carga útil. En realidad, pre-empaquetamos muchas dependencias innecesarias en Vite para que se instale más rápido. Por lo tanto, el tamaño del disco de los módulos de nodo a menudo es una fracción de los proyectos basados en Webpack. Aquí hay otro ejemplo de un usuario migrando una aplicación Rollup de producción a Vite. Como puedes ver, el tiempo de inicio original era de más de dos minutos y una sola recarga puede tardar hasta 23 segundos. Y ahora ambos números, después de migrar a Vite, se han reducido a casi nada. Concedido, Rollup no tiene reemplazo de módulo en caliente. Pero apuesto a que los usuarios de Webpack no están familiarizados con las actualizaciones en caliente que tardan unos segundos en proyectos grandes. Con Vite, se garantiza que el HMR siempre será instantáneo. Ahora vamos a profundizar en lo que contribuye al rendimiento de Vite. Vite se basa en dos tendencias interesantes que hemos visto en el último año. La primera es que el JavaScript moderno ahora está ampliamente soportado. Los módulos ES nativos ahora tienen más del 92% de soporte global.

2. Rendimiento y Sobrecarga

Short description:

Los navegadores antiguos como IE11 se están volviendo obsoletos, dando paso a nuevos compiladores de JS como ESBuild y SWC, que son significativamente más rápidos. Vite aprovecha el ESM nativo construyendo el servidor de desarrollo en torno a él, eliminando la necesidad de agrupación. El ESM nativo permite la carga bajo demanda, aprovecha las cabeceras HTTP para el almacenamiento en caché y el reemplazo eficiente de módulos en caliente. Sin embargo, hay un inconveniente con el ESM nativo, a saber, la sobrecarga de las solicitudes HTTP. Vite aborda este problema pre-agrupando las dependencias con ESBuild, reduciendo el número de solicitudes HTTP y mejorando el rendimiento.

Y solo vamos a ver este número aumentar a medida que los navegadores antiguos como IE11 salgan del mercado a un ritmo acelerado. Lo segundo importante es que hay nuevos compiladores de JS escritos en lenguajes nativos. Dos de los ejemplos más prominentes son ESBuild, que está escrito en Go, y SWC, que está escrito en Rust. Ambas herramientas son dramáticamente más rápidas que las herramientas escritas en JavaScript. A veces hasta un 100%... a veces hasta 100 veces más rápido, dependiendo del tipo de trabajo y los núcleos de CPU utilizados.

Así que Vite aprovecha el ESM nativo de CHORN1 construyendo el servidor de desarrollo en torno a los ES modules. Hay muchos beneficios de un servidor de desarrollo ESM nativo. En primer lugar, no hay necesidad de hacer ninguna agrupación. Eso es una gran cantidad de trabajo que simplemente ya no es necesario. En segundo lugar, el ESM nativo es bajo demanda por naturaleza, lo que significa que si un módulo no se carga para la pantalla actual en la que estás trabajando, ni siquiera necesita ser procesado. En tercer lugar, dado que los modules se obtienen a través de solicitudes HTTP, podemos aprovechar las cabeceras HTTP y dejar que el navegador haga el almacenamiento en caché. Y finalmente, lo más importante, el reemplazo de módulos en caliente puede implementarse sobre el ESM nativo de una manera muy sencilla pero eficiente.

Así que veremos si esto nos da grandes victorias en performance pronto, pero quiero ser honesto con los compromisos técnicos aquí. El ESM nativo no es perfecto sin ningún inconveniente. El principal problema que hemos enfrentado es la sobrecarga de las solicitudes HTTP. Por ejemplo, una dependencia como Lodash ES puede contener más de 700 modules internos. Y como el ESM nativo es ansioso, cuando importas incluso solo el método único de Lodash ES, el navegador intentará solicitar todos estos modules que se importan en su punto de entrada. Ahora, cada solicitud de módulo se traduce en una solicitud HTTP y la sobrecarga simplemente se acumula. Crea una congestión de red e incluso en máquinas locales con poca o ninguna latencia, esta sobrecarga sigue siendo notable.

Así que, Vite implementa algunos trucos para solucionar este problema. El primero es que pre-agrupamos las dependencias con ESBuilt. Hay muchas dependencias grandes como Material.UI que contienen cientos e incluso miles de modules internos. Pero no cambian a menudo. En su mayoría contienen JavaScript estándar que no necesita ningún procesamiento especial, a diferencia de tus archivos fuente. Así que, esto los convierte en el candidato perfecto para ser pre-agrupados con ESBuilt. Al pre-agruparlos, podemos asegurar que cada dependencia se traduce en solo una solicitud HTTP como máximo. Y como ESBuilt es tan rápido, el impulso inicial es a menudo dramático, especialmente cuando estás utilizando dependencias grandes. Además, las dependencias no cambian a menudo, por lo que podemos almacenar fácilmente en caché la salida pre-agrupada en disco y saltarnos la fase de pre-agrupación en los inicios de servidor posteriores. Este proceso también convierte las dependencias de JS comunes en ESM para que sean consumibles de forma nativa por el navegador. Además de eso, las dependencias pre-agrupadas pueden ser fuertemente almacenadas en caché con cabeceras HTTP.

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

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.
10 Años de OSS Independiente: Una Retrospectiva
JSNation 2024JSNation 2024
33 min
10 Años de OSS Independiente: Una Retrospectiva
This talk is a ten-year retrospective into the growth of the Vue.js framework as an open-source project. It highlights the challenges faced by open-source developers, the importance of finding balance and managing scope, and the collaborative nature of the Vue community. The talk also discusses the development of Vite as a build tool and the vision for a unified JavaScript toolchain. It emphasizes the need for community alignment, contributions, and testing, while acknowledging the challenges of bad actors in the open-source community.

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.