Rspack Recientemente Fue Premiado como Avance del Año en JSNation

Bookmark
Rate this content

Para aquellos que no han oído hablar de Rspack, es una versión 1:1 de Webpack en Rust.

Pero, ¿sabías que rspack en realidad es la cuarta iteración de los empaquetadores nativos que nuestro equipo ha diseñado, y originalmente comenzó como un complemento para esbuild? En su desarrollo, hemos reescrito esbuild y rollup en Rust, desmontado parcel para entenderlo mejor y en general hemos revisado todos los empaquetadores del mercado durante el desarrollo de rspack antes de finalmente elegir el diseño de la API de webpack para el proyecto tal como se conoce hoy en día.


En esta charla compartiré los detalles de su creación, por qué lo construimos, cómo se ve el futuro de rspack y nuestra propia experiencia + datos comerciales que hemos recopilado con él en proyectos supermasivos en ByteDance.

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

Zack Jackson
Zack Jackson
31 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy discutió RSPack, una reescritura en Rust de Webpack que ganó el Avance del Año en JS Nation. RSPack fue desarrollado en ByteDance para abordar las complejidades de su WebInfra y proporcionar un empaquetador adecuado para entornos nativos y exóticos. El desarrollo de RSPack se centró en mejorar las capacidades de ES Build, reducir los tiempos de espera de CI y maximizar la velocidad del producto. ESBuild y Webpack tenían diversas debilidades y limitaciones, lo que llevó a la decisión de crear una nueva arquitectura de empaquetador. RSPack tenía como objetivo ser agnóstico al lenguaje y priorizar la integridad del artefacto, el rendimiento, la productividad y el valor comercial. El diseño de la API enfatizó un equilibrio entre rendimiento y versatilidad, adaptado para empresas más grandes. RSPack logró reducciones significativas en los costos en la nube y los tiempos de compilación, y las ideas futuras incluyen la optimización de TypeScript y el almacenamiento en caché remoto. Para empresas más pequeñas, las consideraciones al elegir un empaquetador incluyen el rendimiento, la fragmentación, la confiabilidad y la experiencia del usuario.

1. Introducción a RSPack

Short description:

Hoy, hablaré sobre RSPack, una reescritura de Webpack en Rust que ganó el premio Breakthrough of the Year en JS Nation. Discutiré la razón detrás de su creación.

♪♪♪ Muy bien, bueno, gracias por venir a mi charla. Bien, entonces primero, ¿alguien sabe qué es RSPack? No puedo ver a nadie, así que... Bien, genial. Entonces, alguien sí lo sabe. Para aquellos de ustedes que no saben qué es, es esencialmente una reescritura de Webpack en Rust que terminamos haciendo. Así que, realmente, de lo que voy a hablarles hoy, ya que estoy en JS Nation, la conferencia de Ámsterdam, RSPack de hecho ganó Breakthrough of the Year, así que pensé que sería una oportunidad fantástica para hablar un poco sobre la razón detrás de su creación.

2. WebInfra at ByteDance and the Origins of RSPack

Short description:

WebInfra en ByteDance soporta un vasto conjunto de herramientas y frameworks para unificar la DX de todo en soluciones centrales. La complejidad y el alcance de la responsabilidad son mucho mayores en comparación con los proyectos de código abierto. Las obligaciones de guardia son altas, con un tiempo de respuesta y resolución rápido. Escribir un empaquetador personalizado se volvió necesario debido a las complejidades y la necesidad de una solución adecuada que funcione bien con entornos nativos y exóticos. RSPack se originó a partir de Link Speedy, una solución de desarrollo multiplataforma interna.

Entonces, solo un poco de contexto sobre cómo se ve WebInfra en ByteDance en términos de su escala es, uno, tenemos que mantener un conjunto muy vasto de herramientas, frameworks, sistemas que soportan todas las funciones comerciales de la empresa. Tenemos aproximadamente más de 1,000 aplicaciones únicas de aplicaciones web o nativas. Tenemos decenas de miles de front-ends, y hacemos decenas de miles de despliegues en producción cada semana. Así que, en general, hay bastante rendimiento y mucha presión en todo lo relacionado con la infraestructura. Y nuestro trabajo, realmente, es unificar la DX de prácticamente todo en soluciones centrales que puedan funcionar para varias funciones del negocio. Así que, eso es un poco de contexto sobre lo que hacemos.

Entonces, una de las cosas es que hay muchas complejidades en las herramientas de construcción subyacentes y en el tipo de stacks con los que tenemos que trabajar. Así que, lo que hemos descubierto a lo largo del camino es que las operaciones, específicamente entre, digamos, código abierto versus operaciones internas, tienen algunas diferencias clave. Las principales que hemos visto son generalmente, diría yo, solo la complejidad del negocio que tenemos que soportar es generalmente mayor de lo que verías en tus típicos proyectos de código abierto. El alcance de la responsabilidad, también, es bastante diferente. De lo que a menudo vemos en un proyecto de código abierto es que generalmente tendrías un tipo de enfoque único. Así que, si pensamos en Next.js, es principalmente para web, SSR, o React Native, que obviamente se centra en aplicaciones nativas. Pero necesitamos soportar un ecosistema realmente vasto que pueda impulsar varias funciones del negocio y buscar herramientas que realmente hagan eso bien en su conjunto. Diría que probablemente la mayor diferencia, sin embargo, que hemos visto son las obligaciones de guardia. Típicamente, en código abierto, no hay obligación de guardia. Abres un problema en git, y podría ser respondido, y así sucesivamente. Pero para nosotros en el equipo de Inver, considerando que soportamos, creo, 150,000 empleados actualmente, tenemos una expectativa realmente alta de cerrar estas guardias, mientras que, ya sabes, la mayoría de ellas se resuelven dentro de las 24 horas, y casi cualquier cosa, en cualquier lugar, se resuelve dentro de una semana. Así que, eso es una demanda y presión bastante alta.

Entonces, ¿por qué terminamos buscando escribir un empaquetador personalizado? Entonces, uno, las cosas se estaban complicando. Muchas de estas diversas herramientas, ecosistemas, productos, diseñados para soportar funciones muy diferentes del negocio, desde sistemas nativos hasta sistemas embebidos hasta desarrollo de hardware personalizado, web, web híbrida, y así sucesivamente, continúa creciendo. Encontrar una solución adecuada fue bastante complicado, especialmente si estamos buscando cosas que funcionen realmente, realmente bien con nativos, que sean rápidas y eficientes, pero también, quizás, funcionen en entornos muy exóticos. No sé si alguien ha trabajado alguna vez con una aplicación de WeChat o algo así, pero no están basadas en JavaScript, así que estás escribiendo módulos JSON, y necesitarías un compilador que pueda emitir, esencialmente, JSONs en lugar de emitir JavaScript. Así que, realmente, también tuvimos que intentar trabajar dentro de entornos exóticos. Así que, obviamente, lo que estamos buscando es algo que vaya a soportar el negocio realmente bien, algo que sea estable, algo que vaya a ser eficiente, algo que pueda escalar, especialmente a medida que el número de productos bajo el portafolio continúa creciendo. Y un gran desafío que habíamos visto es que muchas de nuestras obligaciones de guardia generalmente iban a depurar problemas en la construcción, así que tratar de reducir esa presión de guardia fue muy crítico para nosotros. Entonces, ¿cómo comenzó realmente RSPack? En realidad, comenzó con algo que llamamos Link Speedy, que es esencialmente nuestra solución de desarrollo multiplataforma interna. Creo que lo estamos haciendo de código abierto en 2025, a principios de 2025. Estamos planeando hacerlo de código abierto. Pero los orígenes de RSPack realmente comenzaron aquí con Links. Inicialmente, lo que era en realidad, era solo llamado Speedy, y era básicamente un plugin de ES Build, y eso era todo.

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

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.
Rome, ¡una cadena de herramientas moderna!
JSNation 2023JSNation 2023
31 min
Rome, ¡una cadena de herramientas moderna!
Top Content
Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.
Componentes de Servidor con Bun
Node Congress 2023Node Congress 2023
7 min
Componentes de Servidor con Bun
Top Content
Bun is a modern JavaScript runtime environment that combines a bundler, transpiler, package manager, and runtime. It offers faster installation of NPM packages and execution of package.json scripts. Bun introduces a new JavaScript and TypeScript bundler with built-in support for server components, enabling easy RPC with the client. This allows for code splitting and running code that streamingly renders React or any other library from the server and mixes it with client code, resulting in less JavaScript sent to the client.
Desafíos para las Optimizaciones de Producción Incrementales
JSNation 2024JSNation 2024
32 min
Desafíos para las Optimizaciones de Producción Incrementales
TurboPack is a new bundle similar to Webpack, focusing on incremental builds to make them as fast as possible. Challenges in production builds include persistent caching, incremental algorithms, and optimizing export usage. The compilation process can be split into parsing and transforming modules, and chunking the module graph. TurboPack aims to achieve faster production builds through incremental optimization and efficiency. Collaboration and compatibility with other ecosystems are being considered, along with the design of a plugin interface and tree-shaking optimization.
Parcel 2: el Empaquetador Automágico
DevOps.js Conf 2021DevOps.js Conf 2021
8 min
Parcel 2: el Empaquetador Automágico
Parcel 2 is a ground-up rewrite of Parcel 1, a fast and scalable zero-configuration web application bundler used by large companies like Atlassian and Adobe. It offers a zero-config approach with good defaults, making it production-ready out of the box. The new features include a revamped plugin system, a configuration file, transformers for file conversion, optimizers for code compression, target support for different browsers, diagnostics for error debugging, and named pipelines for data and JavaScript in different formats. Parcel 2 also supports different import scenarios, such as importing JSON files with named pipelines and using query parameters for image optimization. It includes various performance improvements, stable caches, optimized data structures, enhanced code splitting and bundling, improved scope hosting, and better support for monorepos and libraries. A React example is provided to showcase the simplicity of Parcel and how to use it with React.
Dominando tu paso de construcción - Dominando tu código
DevOps.js Conf 2021DevOps.js Conf 2021
28 min
Dominando tu paso de construcción - Dominando tu código
This Talk explores JavaScript code optimization using Rollup, showcasing examples of improved load times and reduced server size. It delves into Rollup customization and plugin development, demonstrating how to write plugins and remove code using hooks. The Talk also covers module code loading, advanced code control, and importing/emitting files with Rollup. Additionally, it highlights the adoption of Rollup's plugin system by other tools and introduces a self-made terminal used in the presentation.