JavaScript y aplicaciones modernas y Utilizando un servidor de producción

💖 JavaScript y aplicaciones modernas y Utilizando un servidor de producción

The cost of JavaScript in 2019

• Web moderna está basada en JavaScript
• Muchas veces no somos conscientes al momento de instalar muchas dependencias, estamos creando una mala experiencia para los usuarios
• En el 2018 se estimó que el tamaño medio de los sitios web esta alrededor de 350kB [Tamaño moderadamente aceptable]
  • El tiempo de espera para que una aplicación sea interactiva tarda más de 15 segundos

Si el JavaScript de lado del cliente no está beneficiando a la experiencia de usuario, pregúntate a ti mismo, si realmente es necesario

• Webpack en modo de desarrollo no realiza ninguna optimización de código
• lo que haremos sera:
  1. Compilar webpack en producción
  2. Utilizar un servidor listo para producción
• Si ponemos -p en webpack hace dos cosas
  • Pone NODE_ENV=production a node
  • Pasa el parámetro mode=production a webpack

RESUMEN: Es importante tomar en cuenta el modo de producción para analizar si vamos bien con nuestro JavaScript a nivel de performance

Para confirmar, lo que se está haciendo es:

1- Construyendo un build.js más liviano con el script “npm run build”-
2- Creando un servidor, usando “npm run serve”, que lea el proyecto de la raíz que incluye el build.js, que acaba de construirse con “npm run build”

es correcto?

🤓 Buenísima la charla de Addy Osmani -"The cost of JavaScript in 2019 🔥🔥

Estoy tomando el curso en Noviembre del 2022 y no me funcionó el flag “-p”. me salía este error:

> [email protected] build
> webpack -p

[webpack-cli] Error: Unknown option '-p'
[webpack-cli] Run 'webpack --help' to see available commands and options

Busqué soluciones y me funcionó con esto:

"build": "webpack --mode production --env production"

Para que no tengan que copiar la url que les da el serve solo deben dar ctrl + click y listo se abrira la url en el navegador

package.json

1. Compilar Webpack produccion
   "build": "webpack -p"
2. Utilizar un servidor para produccion
   "serve" : " serve ."

Este curso es una joya!

para usar npm run build en laravel usamos vite

https://laravel.com/docs/9.x/vite 

👌