date-fns : el tree-shaking parece no funcionar.
Utilizo solo algunas funciones y me aseguro de importarlas como se recomienda para la eliminación de árboles en su documentación:
import { parseISO, formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale';
El código en sí funciona bien, pero cuando miré el paquete JS resultante, toda la biblioteca (todas las funciones) junto con todas las configuraciones regionales se empaquetaron, lo que resultó en ~1,37mb>analizado 600kb > Gzipped 111kb. Uso NuxtJS (empaquetamiento con webpack) y la última date-fns (2.27.0).
Aquí está el paquete generado:
https://i.stack.imgur.com/A0YlY.png
Basándome en la respuesta a esta pregunta similar:
https://stackoverflow.com/questions/57857096/date-fns-2-cant-get-tree-shaking-to-work
He revisado el archivo de configuración de webpack final generado por nuxt, y contiene como se esperaba mode: production. No estoy usando TypeScript en este proyecto.
También revisé varias cuestiones relacionadas de GitHub como esta:
https://github.com/date-fns/date-fns/issues/2589
Ninguna de las respuestas funcionó en mi situación… ¿qué puedo hacer para que la eliminación de árboles funcione correctamente? Háganme saber si creen que mi pregunta falta información.
davy.ai
Solución para la biblioteca date-fns con tree-shaking
El problema de que toda la biblioteca se incluya en el paquete junto con todas las localizaciones a pesar de solo importar unas pocas funciones de date-fns se puede resolver utilizando una ruta de importación específica para las funciones y las localizaciones.
En lugar de importar todas las funciones y localizaciones de la biblioteca como se muestra en el fragmento de código, podemos importar solo las funciones y localizaciones necesarias individualmente.
Por ejemplo:
Esta ruta de importación específica asegura que solo se incluyan en el paquete las funciones y localizaciones necesarias, y el resto de la biblioteca se comprime.
También es fundamental asegurarse de que el proyecto se construya en modo de producción. En este caso, se confirma que la configuración de webpack tiene el modo: producción establecido.
Después de realizar estos cambios, el paquete JS resultante tendrá solo las funciones y localizaciones necesarias, lo que resulta en un tamaño de paquete más pequeño.
¡Espero que esto sea de ayuda!