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]

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.

**Esto fue asombroso **

Impresionante, que curso tan bueno. Felicitaciones!!!

que Interesante, me encanta este curso

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