Comando npm run build

Vamos a presionar F12 y vamos a tratar de entender cómo funciona nuestro proyecto de momento. Vamos a acceder a la pestaña “Network” de la Developer Tools de Chrome para analizar todos los Network Request, o sea, todas las peticiones que ocurren cuando un usuario entra a nuestra página. Entonces cargamos nuestra página y vemos al lado derecho varios archivos. Todo esto se está descargando al entrar a nuestro sitio, tenemos este documento que simplemente nuestro HTML base. Esto es lo primero que se descarga. Y aquí simplemente tenemos un “div” con “id”. No hay nada más, ya que los componentes se van a cargar posteriormente con JavaScript. Lo primero que se descarga es este HTML base y luego por aquí tenemos varios archivos con relación a los estilos de nuestros componentes y con relación a cada uno de nuestros componentes. Por ejemplo, tenemos “ProductList.vue”, “LeftMenu.vue”, tenemos nuestro “products.ts” y vemos todo súper detallado debido a que estamos en modo de desarrollo. Nosotros para ver nuestro proyecto hemos ejecutado el comando “npm gran dev”, esto ejecuta nuestro proyecto en modo de desarrollo y nos provee de una URL para visualizar nuestra página desde el navegador. Sin embargo, ahora vamos a ejecutar por primera vez nuestro proyecto en un modo de producción, que es básicamente lo que un usuario final estaría visualizado en su navegador. Cuando publiquemos nuestro proyecto, entonces, tal como podemos ver aquí en nuestro “package.json”, nosotros disponemos de un script que se llama “npm run build”. Este comando en “npm run buil” se va a encargar de construir una versión de producción. De hecho, eso también se indica en nuestro archivo “README”. Si queremos compilar y tener “Hot-Reload” durante el desarrollo, usaremos “run dep”. “Hot-Reload” significa que, ante cada cambio, nuestra página en el navegador se va a actualizar automáticamente. Si, en cambio, nosotros queremos verificar que no hayan errores de tipo “compilar” y “minificar” para producción, usaremos este otro comando. Entonces vamos a ejecutar este comando por primera vez en nuestro proyecto. Usamos “vite” y “construimos para producción”. El resultado de toda esta compilación se guarda en una carpeta “dist”. Esta carpeta “dist” contiene un “index.HTML” que se genera en base al HTML que tenemos por aquí, luego tenemos una carpeta de “assets” en su interior. Esta carpeta de assets contiene nuestras fuentes. En este caso hacemos uso de “materialdesignicons” y se proporciona en varios formatos para compatibilidad con navegadores. Y así mismo tenemos esos archivos JavaScript, en este caso “AboutView”, “CartView”, “HomeView” y tenemos también un archivo “index” principal, que es el que se va a encargar de hacer uso de los demás. Aquí muy probablemente se encuentren definidas las rutas de nuestro proyecto. Como vemos, “vite” se encarga de agregar un sufijo o sea un texto al final de cada archivo, de tal manera que si nosotros modificamos nuestro código y en el futuro volvemos a construir con vite para producción, este número va a cambiar. Si el archivo “AboutView” ha cambiado de esta manera, nuestros usuarios tendrán que volver a descargar los archivos si es que este numerito cambia. Es más que todo para evitar problemas con la memoria caché de los navegadores. Para conseguir que nuestros usuarios siempre estén al día con nuestros cambios más recientes, siguiendo la misma idea, también tenemos un archivo CSS con los estilos que usa nuestro proyecto. Aparte de la carpeta de “assets” tenemos una carpeta “data” con los archivos json que estamos leyendo, y tenemos una carpeta “products” con las imágenes. “Data” y “products” están a este mismo nivel y esto permite que ambos sean accesibles ante cualquier usuario. Si un usuario visita la ruta “/products”, “/headphones.jpg”, podrá ver esta imagen. Si un usuario visita la ruta “data” podrá ver estos archivos. Si nosotros queremos evitar publicar estos archivos, simplemente tenemos que ubicar nuestros archivos json en una carpeta distinta dentro de nuestra carpeta “src”. Para que cuando se construya al final esa data termine asignada a alguno de estos JavaScript. Bien vamos a hacer un cambio y vamos a volver a construir nuestro proyecto para ver qué es lo que ocurre, por ejemplo, en este caso vamos a cambiar la. Ubicación de la carpeta data para que los datos no queden expuestos públicamente, sino que sean incluidos en algún otro JavaScript como resultado de la compilación. Entonces, por ejemplo, dentro de “src” vamos a tener la carpeta “data”. Simplemente movemos “data” desde “public” hasta “src” y tenemos que asegurarnos de estar importando esta data correctamente. En nuestro store de categories vemos que ya no se encuentra en esta ubicación, sino que simplemente estaría aquí. O sea, salimos de la carpeta de stores quedamos en “src” y dentro de “src” buscamos “data”. La misma idea sería para “productos”. Bien, hemos hecho simplemente este cambio. Vamos a volver a compilar para ver los resultados. Nos dirigimos a nuestra carpeta “dist”. Y como vemos, ya no existe una carpeta “data” porque ya no se encuentra dentro de “public”. Simplemente existe una carpeta “products” con las imágenes, porque esto sí es público y dentro de “assets” tenemos estos archivos. Estos archivos contendrán la data, pero de eso se encarga vite. Vamos a cerrar todo y vamos a abrir uno de estos archivos generados solamente para ver cuál es su contenido. “AboutView” Simplemente tiene una línea de código. La segunda línea está vacía. “CartView” de igual manera, con “HomeView” también pasa lo mismo. ¿Por qué los archivos en la carpeta “list” tienen solo una línea de código? Lo que pasa es que este es el resultado de la minificción. Cuando vite compila nuestro proyecto para producción, tiene como objetivo minificar nuestro código de tal manera que ocupe el menor espacio posible. Por eso es que el resultado solo consta de una línea y por eso es que las variables solo constan de un carácter. La idea de esto es que nosotros podamos trabajar en la carpeta “src” con código ordenado, que se entienda muy bien y tengamos finalmente un resultado minificado, que ocupen la menor cantidad de espacio posible para que los usuarios, cuando visiten nuestra página puedan descargarlos “assets” necesarios y visualizar el contenido de nuestro sitio rápidamente.

Crea una cuenta y continúa aprendiendo 🚀

Comando npm run build

Análisis del proyecto en modo desarrollo

Compilar en modo producción

Contenido de la carpeta `dist`

Otras carpetas

Reubicación de la carpeta `data`

Archivos minificados

Conclusión

Crea una cuenta y continúa aprendiendo 🚀

Comando npm run build

Análisis del proyecto en modo desarrollo

Compilar en modo producción

Contenido de la carpeta dist

Otras carpetas

Reubicación de la carpeta data

Archivos minificados

Conclusión

Contenido de la carpeta `dist`

Reubicación de la carpeta `data`