Marco front-end basado en datos

Apertura: deja que Vite te ayude en el camino hacia la ingeniería de front-end

En la actualidad, en el proceso de desarrollo de proyectos, los ingenieros de front-end son cada vez más inseparables de las herramientas de construcción.Se puede decir que las herramientas de construcción se han convertido en la configuración estándar de los proyectos de ingeniería de front-end.

Sin embargo, las herramientas de construcción front-end de hoy en día se pueden describir 乱花渐欲迷人眼como antiguas browserify, grunttradicionales Webpack, modernas , etc. No solo hay muchos tipos, sino que también se actualizan rápidamente Rollup.ParcelEsbuildVite

Por lo tanto, muchos amigos me preguntarán qué herramienta de compilación es mejor usar y vale la pena aprender. De hecho, no importa cómo se actualice el nivel de la herramienta, el problema central que resuelven, es decir, el punto crítico de la ingeniería frontal permanece sin cambios . Por lo tanto, si desea saber qué herramienta es mejor usar, depende de su efecto para resolver los puntos débiles de la ingeniería de front-end.

Entonces, ¿cuáles son los puntos débiles de la ingeniería front-end?

El primero son los requisitos modulares de la parte delantera . Sabemos que existen muchos estándares de módulos en la industria, incluidos ESM, CommonJS, AMD y CMD. Por un lado, la ingeniería de front-end necesita implementar estas especificaciones de módulos para garantizar que los módulos se carguen normalmente. Por otro lado, necesita ser compatible con diferentes especificaciones de módulos para adaptarse a diferentes entornos de ejecución.

El segundo es ser compatible con navegadores y compilar sintaxis avanzada . Debido a la limitación de la especificación de implementación del navegador, siempre que el lenguaje/sintaxis de alto nivel (TypeScript, JSX, etc.) quiera ejecutarse normalmente en el navegador, debe convertirse a una forma que el navegador pueda entender. Todo esto requiere soporte a nivel de la cadena de herramientas, y esta demanda siempre existirá.

Otro es la calidad del código en línea . A diferencia del enfoque de consideración en la etapa de desarrollo, en el entorno de producción, no solo debemos considerar los 安全性problemas del código 兼容性y garantizar el funcionamiento normal del código en línea, sino que también debemos considerar el rendimiento del código cuando se está ejecutando. Debido a las muchas versiones de los navegadores, la compatibilidad del código y las políticas de seguridad son diferentes, la calidad del código en línea también será un punto problemático de larga data en la ingeniería de front-end.

Al mismo tiempo, 开发效率no se puede ignorar. Sabemos que el tiempo de inicio en frío/segundo inicio y el tiempo de actualización en caliente del proyecto pueden afectar seriamente la eficiencia del desarrollo, especialmente cuando el proyecto es cada vez más grande. Por lo tanto, mejorar la velocidad de inicio y la velocidad de actualización en caliente del proyecto también es un requisito importante para la ingeniería de front-end.

Entonces, ¿cómo resuelve la herramienta de compilación front-end los problemas anteriores?

• En términos de modularidad, proporciona un esquema de carga de módulos y es compatible con diferentes especificaciones de módulos.
• En términos de traducción de gramática, coopere con cadenas de herramientas frontales como Sass, TSC, , Babeletc. para completar la función de traducción de gramática avanzada y, al mismo tiempo, procesar recursos estáticos para que puedan cargarse normalmente como un módulo.
• En términos de calidad del producto, en el entorno de producción, coopera con Terserotras herramientas de compresión para comprimir y ofuscar el código, Tree Shakingeliminar el código no utilizado, proporcionar procesamiento de degradación de sintaxis para navegadores de versiones bajas, etc.
• En términos de eficiencia de desarrollo, la propia herramienta de compilación optimiza el rendimiento de varias maneras, incluidas 使用原生语言 Go/Rust, no-bundleetc., para mejorar el rendimiento de inicio del proyecto y la velocidad de actualización en caliente.

¿Por qué Vite es actualmente la herramienta de construcción más eficiente?

Ahora, volvamos a la pregunta que hicimos al principio, ¿qué herramienta es mejor usar? En otras palabras, ¿qué herramienta es mejor para resolver los puntos débiles de la ingeniería de front-end?

Según los resultados de una encuesta reciente de The State of JavaScript Survey, Vite tiene una tasa de satisfacción de más del 98 % entre los desarrolladores de todo el mundo y se ha utilizado SvelteKiten Astroestos grandes marcos, convirtiéndose en la herramienta de construcción front-end más popular en la actualidad. También te recomiendo que lo uses. ¿Por qué Vito? Podemos examinarlo según las cuatro dimensiones mencionadas anteriormente.

El primero es la eficiencia del desarrollo. La desventaja general de las herramientas de compilación tradicionales es que son demasiado lentas. En comparación con ellas, Vite puede mejorar el rendimiento de inicio del proyecto en un orden de magnitud y lograr efectos de actualización instantáneos en milisegundos.

Tome Webpack como ejemplo. En mi trabajo descubrí que después de usar Webpack para proyectos generales, es muy común que se inicien unos minutos, y las actualizaciones activas a menudo necesitan esperar más de diez segundos. Esto se debe principalmente a que:

• El árbol de dependencias de todo el proyecto debe empaquetarse recursivamente cuando el proyecto se inicia en frío
• La limitación de rendimiento del propio lenguaje JavaScript conduce a un cuello de botella en el rendimiento de la construcción, lo que afecta directamente a la eficiencia del desarrollo.

De esta manera, el efecto no se puede ver inmediatamente después de cambiar el código, y la experiencia de desarrollo natural empeora cada vez más. Entre ellos, el que consume más tiempo es el empaquetado de código y la compilación de archivos.

Y Vite resuelve muy bien estos problemas. Por un lado, Vite implementa el servicio basado en el soporte del ESM nativo del navegador durante la fase de desarrollo no-bundley, por otro lado, utiliza la velocidad de compilación ultrarrápida de Esbuild para construir bibliotecas de terceros y compilar la sintaxis TS/JSX, que puede mejorar efectivamente la eficiencia del desarrollo.

Además de la eficiencia de desarrollo, Vite también se desempeñó bien en las otras tres dimensiones.

• En términos de modularidad, Vite implementa la carga de módulos en función del soporte del ESM nativo del navegador y puede convertir productos en otros formatos (como CommonJS) a ESM tanto en el entorno de desarrollo como en el entorno de producción.
• En términos de traducción de gramática, Vite tiene soporte incorporado para gramáticas avanzadas como TypeScript, JSX y Sass, y también puede cargar varios recursos estáticos, como imágenes, Workers, etc.
• En cuanto a la calidad del producto, Vite implementa el empaque del entorno de producción basado en la herramienta de empaquetado madura Rollup. Al mismo tiempo, puede cooperar con cadenas de herramientas como Terser, Babeletc., que pueden garantizar en gran medida la calidad del producto construido.

Por lo tanto, si desea aprender una herramienta de construcción de front-end, Vite será su próxima mejor opción. No solo resuelve el problema de eficiencia de desarrollo de las herramientas de construcción tradicionales, sino que también tiene todos los elementos de una excelente herramienta de construcción, y también ha experimentado una verificación e implementación a gran escala por parte de la comunidad.

¿Cómo aprender bien Vite?

Sin embargo, muchas personas siempre encuentran varios problemas en el proceso de aprendizaje y aplicación de Vite.

Por ejemplo, muchos materiales de aprendizaje de Vite no son ni sistemáticos ni profundos. La mayoría de los artículos solo pueden enseñarnos cómo construir un proyecto de scaffolding simple, e incluso el código no es necesariamente correcto.

Aunque he aprendido el conocimiento relevante de Vite a través de los materiales, todavía no sé qué complementos o soluciones usar cuando encuentro problemas prácticos porque no tengo suficiente comprensión de la ecología de Vite.

• ¿Qué debo hacer si se informa un error debido al código CommonJS contenido en la biblioteca de terceros?
• ¿Qué sucede si desea realizar una verificación de especificación de código Eslint durante el proceso de desarrollo?
• ¿Cómo generar un informe de análisis de producto de compilación después de que el entorno de producción empaquete el proyecto?
• ¿Qué pasa si quiero ser compatible con navegadores que no son compatibles con ESM nativo?

Además, si no está familiarizado con Esbuild y Rollup, los motores de compilación subyacentes utilizados por Vite, a menudo se sentirá abrumado cuando se encuentre con algunos escenarios que requieran personalización.

• Escriba un complemento de Esbuild para tratar las dependencias de problemas
• Personalice el desempaquetado de los productos de empaque de Rollup para resolver el problema de la dependencia circular que a menudo ocurre en escenarios reales
• ¿Qué problemas de compatibilidad surgirán al usar las funciones de traducción y compresión de código de Esbuild? ¿Cómo resolver?

Por supuesto, como herramienta de construcción, la dificultad de Vite radica no solo en su propia flexibilidad, sino también en la integración y aplicación de muchas cadenas de herramientas frontales Babelcomo core-js.

• @babel/preset-env¿Cuáles son las diferencias entre los valores del useBuiltInsatributo?
• @babel/polyfill¿Cuál es la diferencia con @babel/runtime-corejs?
• @babel/plugin-transform-runtime¿Cuáles son las optimizaciones en comparación con @babel/preset-envel useBuiltIn?
• ¿Cuál es el papel de core-js? ¿Qué versiones de sus productos hay? core-js¿Cuál es la diferencia entre y core-js-pure?

Además, debido a que el código fuente de las herramientas de construcción (no solo incluye Vite, sino también el motor subyacente Rollup) es oscuro e involucra una gran cantidad de bibliotecas de herramientas básicas, la comprensión de muchas personas de los principios de las herramientas de construcción es solo superficial. y es difícil ir más allá.

Como ingeniero front-end que está profundamente involucrado en la primera línea, mi trabajo diario es manejar varias herramientas de construcción. He implementado Vite en muchos proyectos comerciales en la empresa. Tengo una rica experiencia práctica en Vite y experiencia en lectura de código fuente. y también contribuyo al almacén de Vite. Revisa algún código. Por lo tanto, también estoy muy feliz de compartir sistemáticamente mi experiencia práctica y métodos de aprendizaje en Vite con ustedes a través de un folleto.

Entonces, ¿cómo aprende Vite? De acuerdo con los tres principios de paso a paso, práctico y extensible, diseño el contenido del curso de lo más superficial a lo más profundo, brindo una gran cantidad de escenarios y casos prácticos y, al mismo tiempo, le brindo métodos y perspectivas para resolver problemas tanto como sea posible, para que todos puedan aprender después de completar el curso Hacer Específicamente, diseñé el curso en 5 módulos.

En el capítulo de uso básico , comenzaré con usted para inicializar el proyecto Vite desde 0, acceder a varias soluciones CSS modernas, integrar una serie de cadenas de herramientas Lint como Eslint, Styelint y Commonlint, procesar varias formas de recursos estáticos y dominar Vite Varias técnicas precompiladas finalmente le permiten construir de forma independiente un proyecto de andamiaje relativamente completo.

En el capítulo de motor dual , aprenderemos la arquitectura de motor dual de Vite, el contenido relacionado con Esbuild y Rollup, incluido su uso básico y el desarrollo de complementos, dominarlos y allanar 最小必要知识el camino para aplicaciones avanzadas posteriores.

En la sección de aplicaciones avanzadas , aprenderemos varios usos avanzados de Vite y métodos de optimización del rendimiento de la construcción, aprenderemos a escribir un complemento completo de Vite, desempaquetaremos el entorno de producción de manera competente, usaremos Vite para construir proyectos SSR complejos y realizar multiplataforma. Integración basada en federación de módulos Los módulos de aplicación comparten la arquitectura. Ya sea que se trate de habilidades de optimización del rendimiento del proyecto o comprensión de los estándares y especificaciones subyacentes de front-end, obtendrá muchas mejoras con este módulo.

A continuación, analizaremos juntos el código fuente central de Vite , comprenderemos el papel y la implementación subyacente de conceptos importantes en el código fuente, como , , y , y le enseñaremos cómo leer el código fuente de Vite paso a paso, desglosándolo los enlaces clave en el siguiente diagrama de arquitectura Aprenda el principio de implementación de Vite.JITProxy ModuleModule GraphHMR BoundaryPlugin Container

El último es el capítulo de combate escrito a mano. Primero, escribiremos a mano el servicio sin paquete de Vite durante el desarrollo, es decir, el servidor de desarrollo basado en el ESM nativo del navegador en el entorno de desarrollo. Luego, también lo guiaré paso a paso para completar una herramienta de empaquetado del entorno de producción (Bundler), comenzando desde la función de análisis AST, completando el análisis léxico (tokenizar) y el análisis semántico (parse) del código, y realizando el módulo. gráfico de dependencia y cadena de alcance Construya y complete Tree Shaking, detección de dependencia circular y generación de código Bundle, y finalmente realice un Bundler similar a Rollup.

Se puede ver que damos gran importancia al combate práctico en el curso. Todo el código del curso se cargará en el almacén de Github ( dirección del almacén ), y básicamente cada sección tiene un caso de código que se puede ejecutar. Especialmente en el último capítulo, para permitirle comprender los principios subyacentes de la herramienta de construcción, lo guiaré paso a paso para construir una herramienta de construcción simple y realizar un combate escrito a mano de miles de líneas de código, de modo que el El código real puede ser operado.

-vite)), básicamente cada sección tiene un caso de código que se puede ejecutar. Especialmente en el último capítulo, para permitirle comprender los principios subyacentes de la herramienta de construcción, lo guiaré paso a paso para construir una herramienta de construcción simple y realizar un combate escrito a mano de miles de líneas de código, de modo que el El código real puede ser operado.

Finalmente, espero que podamos profundizar juntos en los puntos prácticos y los principios de implementación de Vite, apreciar el escenario subyacente del campo de la construcción de ingeniería de front-end y realmente realizar Vite desde el nivel inicial hasta el avanzado.