Reduciendo el tamaño del bundle

Para reducir el peso de moment, se puede usar este plugin https://www.npmjs.com/package/moment-locales-webpack-plugin que te permite elegir los idiomas que se quieren incluir en el bundle final.

En nuestro caso, necesitamos español, por lo tanto en el webpack config se agrega:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

Y a plugins:

new MomentLocalesPlugin({
    localesToKeep: ['es'],
}),

Actualmente se estaba usando ingles en el sistema. Para usar español, en carouselItem.js ir donde se importa moment, y dejarlo así:

import moment from 'moment'
moment.locale('es')

Así el bundle queda mucho más liviano, y se usa fechas en español. Al parece, el paquete moment incluye internamente el ingles, en caso que no se use ningún paquete de idioma.

⬇️ Reduciendo el tamaño del bundle

BundlePhobia

• Podemos usar soluciones online para analizar que puede estar pesando dentro de nuestra aplicación una de ellas es bundle Phobia
• Existen librerías que son “Tree Shakable”
  • Ayudan al empaquetador de solo sacar lo que se necesitan
• Nos podemos ayudar de bundle Phobia para encontrar paquetes que sean más pequeños a la hora de hacer el bundle de nuestra aplicación

RESUMEN: Para reducir el tamaño de nuestro bundle es importante tomar en cuenta las dependencias que usamos y encontrar la forma de reducir el tamaño ya sea usando las funciones necesarias si es que la libreria es tree shakable o buscando una alternativa liviana

Probé el destructuring y no se redujo el tamaño inicial. Con la segunda opción “lodash/get” sí redujo el tamaño.

Pense que iba a optimizar moment
😃

Tree Shaking es la onda! 😄

Con BundlePhobia nos podemos ayudar para buscar las librerías similares a moment y así escoger la más eficiente.
Yo por ejemplo use dayjs y logre reducirla hasta 23.9 Kb

https://bundlephobia.com/[email protected]

**Esto fue asombroso **

Impresionante, que curso tan bueno. Felicitaciones!!!

que Interesante, me encanta este curso

Sin duda, es la clase del curso hasta ahora que más me ha impactado, es jodidamente maravilloso el tamaño final del bundle optimizado respecto al inicial.

Mi resultado: 😮

Al final me quedo con 31.7 kb

No importa si varia el resultado de esa manera verdad?
Me gustaria feedback, gracias 😄

Excelente clase.

Tengo una duda, para cuando utilizamos timepicker y datepicker ,… normalmente lo suelo usar con bootstrap y hacen uso de moment.js cuando los uso que me recomendarias para poder quitar moment y usar algo mas ligero… ya que he buscado y encontre pickdate.js pero no es muy bueno para las fechas… alguna sugerencia? para optimizar nuestros datepickers y timepickers . Gracias

👌

Excelente clase!

Waoo 😱 esto si que es optimizar