Comando npm run preview

En la lección anterior, nosotros hemos generado nuestros “assets” para producción y hemos dejado de ejecutar nuestro servidor local. Esto significa que si nosotros actualizamos la página que tenemos abierta en el navegador, ésta dejará de funcionar. ¿Por qué? Porque no tenemos un servidor de desarrollo local activo como teníamos anteriormente. ¿La pregunta ahora es de qué manera podemos probar nuestros assets de producción con un servidor local? Si nos dirigimos a nuestro archivo “package.json”, vamos a ver que scripts tenemos disponibles. Cuando nosotros ejecutamos el comando NPM Run “dev esto termina ejecutando el comando “vite”. Vite es una herramienta que se encarga de compilar nuestros assets. Asimismo, nos provee de un servidor local mientras estamos desarrollando. Cuando nosotros hemos construido nuestros assets, hemos usado el comando NPM Run “build”. Ahora, en cambio, queremos probar los assets que ya construimos. En ese caso, debemos usar el comand NPM Run “preview” y esto usará a “vite” para que nos proporcione de un servidor local. Pero ya no es modo de desarrollo, si no usando nuestros assets de producción. Entonces vamos a usar el script de “npm run preview”. Bien, vamos a copiar este enlace y vamos a acceder y tenemos nuevamente nuestra aplicación funcionando. Pero vamos a presionar F12 para verificar que es lo que se está descargando al visitar nuestra página. Vamos a actualizar nuestra página y vemos que todo esto es lo que se termina descargando. Cuando estábamos en modo de desarrollo se descargaban muchos más archivos, porque en modo de desarrollo la idea es brindarnos información detallada de cuando ocurre un error. Sin embargo, en el modo de producción no se requiere de tanto detalle. Es más, queremos sólo descargar lo necesario. Es por eso que se descargan menos archivos. Si nos damos cuenta, primero se descarga el HTML base de nuestra página. Este a su vez, descarga un archivo JavaScript llamado “index” y un archivo CSS. Ambos provienen de la carpeta de assets. Entonces siguiendo este orden, es que se ha descargado aquí un archivo de JavaScript con la lógica de nuestro proyecto. Por aquí vemos que está el código de “pinia”, por ejemplo. Luego tenemos aquí un archivo CSS con nuestros estilos. Tenemos por aquí la fuente correspondien a nuestros iconos y por aquí tenemos nuestro componente “HomeView”. Sólo se ha descargado el componente “HomeView”, por qué todavía no visitamos “CartView” ni “AboutView” Y luego tenemos aquí imágenes. Se ha descargado, por ejemplo, el logo de nuestra página y las imágenes correspondientes a los productos. Todo esto ocurre cuando visitamos una página específicamente en nuestro proyecto en modo de producción. Descarga estos archivos. Por ejemplo, vamos a dar clic a Cart View y en el instante en que le damos clic vemos que recién se descarga el componente “CartView”. Si damos clic en la opción de About, vemos que recién en ese momento se descarga el componente “AboutView”. Pareciera que son muchas líneas, pero en realidad tienen una sola línea. Solo que Chrome le está dando cierto formato para que nosotros veamos su contenido. Si le doy clic aquí para desactivar esta opción de “pretty print”, ya se mostrará el archivo tal cual. “HomaView”, como vemos, consta de una línea, “CartView” de igual manera y “AboutView” también. Como vemos, en ningún momento se ha descargado “products.json” ni “categories.json”, porque esa data ha sido importada y termina descargándose como parte de los componentes que lo necesitan. Por ejemplo, aquí vemos que “HomeView” contiene de hecho esta información en el archivo de “HomeView”. Vemos aquí la información de los productos. Solo que esa información está dentro de esta sola línea de código para que ocupe menos espacio.

Crea una cuenta y continúa aprendiendo 🚀

Comando npm run preview