Cómo reducir el tamaño de tu paquete Vue.JS con Webpack

Foto de SwapnIl Dwivedi en Unsplash

Trabajo en el equipo de Industry 4.0 en Stanley Black & Decker. Nuestro equipo creó recientemente el equivalente de una App Store para las plantas de fabricación de Stanley en todo el mundo. Las fábricas pueden visitar el mercado y seleccionar qué aplicaciones necesitan en función de los productos que están produciendo en esa ubicación. Esto creará una compilación personalizada que agrupa todas estas aplicaciones para que la planta se ejecute. Debido a la agrupación de una cantidad tan grande de aplicaciones, nuestra compilación de Vue para producción resultó en múltiples advertencias sobre el exceso de tamaño.

Tamaño de nuestra construcción inicialmente

Cuando hacemos una compilación, recibimos los siguientes 2 mensajes de error:

Vue recomienda que los paquetes no excedan un tamaño de 244 KiB. Tenemos 14 activos solo donde cada uno supera este tamaño. Además, tenemos cuatro puntos de entrada que también están por encima del tamaño recomendado. Esto es lo que hice para reducir el tamaño de nuestra construcción a la mitad.

¿Qué está causando los grandes paquetes de construcción?

Primero necesitaba comprender qué estaba causando los grandes tamaños de paquetes de compilación. Para hacer eso instalé webpack-bundle-analyzer. Esto proporcionará una guía visual del tamaño de los elementos en cada paquete.

npm install --save-dev webpack-bundle-analyzer

A continuación, configuro webpack para usarlo en el archivo vue.config.js. Así es como se ve mi archivo vue.config.js:

const BundleAnalyzerPlugin = require ('webpack-bundle-analyzer')
    .BundleAnalyzerPlugin;
module.exports = {
    configureWebpack: {
        complementos: [nuevo BundleAnalyzerPlugin ()]
    }
};

Con el complemento instalado cuando ejecuto Build for Production nuevamente, puedo ver que mi build es de 2.48MB. De la imagen puedo ver que los mayores culpables en tamaño son claramente:

  • vue-echarts
  • vuetificar
  • momento
  • lodash

Reduciendo el tamaño de Lodash

Lodash estaba ocupando 70.74kb de espacio. Lodash solo se usa en 2 lugares en todas las aplicaciones de nuestro marco. Eso es mucho espacio para solo 2 métodos.

No solo estábamos cargando lodash sino que también estábamos cargando vue-lodash. El primer paso fue eliminar vue-lodash de nuestro package.json ya que no era necesario.

El siguiente paso fue importar solo los dos elementos que necesitábamos de lodash en lugar de cargar toda la biblioteca. Estábamos usando cloneDeep y sortBy. Reemplazo la llamada inicial que estaba importando toda la biblioteca lodash:

importar _ de 'lodash';

Lo estoy reemplazando con esta llamada que importa solo los 2 elementos que necesitamos. Para hacer eso, cambio la importación de lodash a lodash / core:

importar {cloneDeep, sortBy} desde 'lodash / core';

Hacer este cambio ha reducido el tamaño de mi paquete de compilación de 2.48MB a 2.42MB. Aquí está la imagen que muestra el tamaño actual de la compilación.

Aquí podemos ver el tamaño de lodash en sí mismo como parte de nuestro paquete de compilación.

Reduciendo el tamaño de moment.js

Moment.js ocupa 234.36 KB de tamaño en nuestro paquete. Cuando miras la imagen, la mayor parte abrumadora de ese tamaño son las configuraciones regionales de internacionalización para todos los idiomas que admiten. No utilizamos esta parte de moment.js en absoluto, por lo que se incluye mucho peso muerto en nuestro paquete.

Afortunadamente, podemos eliminarlo. En lugar de importar todo moment.js con esta llamada:

importar momento forma 'momento';

Solo podemos importar el código de manipulación de fecha con esta llamada:

importar momento desde 'momento / src / momento'

Hay un inconveniente en hacer este reemplazo al menos en nuestra base de código. Hay 18 lugares donde moment.js se importa en el código. Podría haber hecho una búsqueda global y reemplazar en el código. Pero si agregamos una nueva aplicación al marco, es muy posible que un desarrollador use la llamada predeterminada para importar moment.js. Si lo hacen, volveremos a importar todos los lugares de internacionalización nuevamente.

Entonces, la compensación fue crear un alias de acceso directo en el paquete web. El acceso directo sustituirá todas las llamadas que importen "momento" con "momento / src / momento". Podemos agregar ese alias en nuestro archivo vue.config.js usando resolve y configurando un alias. Así es como se ve mi archivo vue.config.js ahora.

Cuando ejecuto nuestra compilación para producción ahora, nuestro paquete se ha reducido ahora a 2,22 MB de tamaño.

Cuando mire moment.js en la imagen, verá que las configuraciones regionales de internacionalización ya no se cargan.

Al eliminar las configuraciones regionales en moment.js, esto introdujo un error cada vez que inicio mi servidor para ejecutar mi código que dice que no puede encontrar ./locale. Después de investigar un poco, descubrí que este ha sido un problema conocido con moment.js durante varios años en ese momento.js siempre se carga y supone que las configuraciones regionales están presentes. No se puede decir el momento para cargar solo la funcionalidad de manipulación de fecha.

Para resolver esto, uso el paquete web incorporado IgnorePlugin para ignorar este mensaje. Aquí está el código del complemento que agregué a mi archivo vue.config.js:

nuevo paquete web.IgnorePlugin (/^\.\/ locale $ /, / moment $ /)

Reduciendo el tamaño de Vuetify.js

Lo siguiente que quiero apuntar es el tamaño de Vuetify.js. Vuetify está ocupando 500.78KB en el espacio. Esa es una gran cantidad de espacio para un producto de proveedor.

Vuetify proporciona una función que llaman a la carta. Esto le permite importar solo los componentes de Vuetify que usa. Esto reduciría el tamaño de Vuetify. El desafío es que tenemos tantas aplicaciones que pasar y tratar de determinar solo los componentes que estamos utilizando no iba a suceder.

En la versión actual de Vuetify (versión 1.56 en el momento en que escribí este artículo) están proporcionando un producto llamado vuetify-loader. Revisará su código y determinará todos los componentes que está utilizando y luego los importará solo a su paquete de compilación. Nota: Eventualmente vuetify v2 tendrá esta característica incorporada. Hasta que esté disponible esa versión, debe usar vuetify-loader para importar solo los componentes que está utilizando. La documentación de Vuetify establece que para obtener todos los estilos requeridos, debemos importarlos en el lápiz.

Me di cuenta de que estamos ejecutando una versión anterior de vuetify.js. Entonces decido actualizar mi versión de vuetify a la última versión. También instalo los estilos y vuetify-loader al mismo tiempo con:

npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save

Mi código de complemento para importar Vuetify tiene cierta personalización para que el tema use la paleta de colores de nuestra empresa. Así es como se ve mi plugin actual para Vuetify:

Necesitaré cambiar la importación de Vuetify para importar desde vuetify / lib. También importaré stylus para obtener todos los estilos. Así es como se ve mi código de complemento ahora:

El último paso es decirle a webpack que use el complemento vuetify-loader para que solo importe los componentes que estamos usando. Necesitaré el complemento y luego lo agregaré a la matriz de complementos. Aquí está mi archivo vue.config.js:

Ahora, cuando ejecuto mi compilación para producción, mi tamaño de paquete es de 2 MB.

Reduciendo el tamaño de vue-echarts

Vue-echarts no es el elemento más grande que tengo en mi paquete. Vue-echarts se ejecuta sobre echarts. Al igual que Vuetify, estoy ejecutando una versión anterior de ambos productos. para actualizarlos a la última versión ejecuto este comando:

npm install echarts vue-echarts --save

Investigué un poco sobre el repositorio de vue-echarts en GitHub y examiné todos los problemas cerrados para encontrar que la última versión de vue-echarts le permite cargar un paquete más pequeño cambiando lo que importa. Anteriormente lo estaba importando con este comando:

importar ECharts desde 'vue-echarts';

Lo cambio a esto:

importar ECharts desde 'vue-echarts / components / ECharts.vue';

Ahora, cuando ejecuto una compilación para producción, el tamaño de mi paquete ha bajado a 1,28 MB.

Conclusión

Mi objetivo era reducir el tamaño de nuestro paquete creado para la producción de nuestra aplicación. El tamaño inicial de mi compilación fue de 2,48 MB. Al hacer algunos cambios, pude reducir nuestro tamaño de compilación a 1,2 MB. Esa es una reducción de tamaño de casi el 50%.

Si está creando aplicaciones Vue de producción, debe tomarse el tiempo para evaluar su tamaño de compilación. Use el analizador de paquetes webpack para determinar qué elementos consumen más espacio. Luego comience a tomar los pasos necesarios para reducir el tamaño de esos artículos. Pude reducir el tamaño de los cuatro elementos más grandes de mi paquete de esta manera.

Con suerte, podrá seguir estos pasos para reducir el tamaño de su compilación para la producción. Si tiene alguna pregunta o comentario, publíquelos a continuación. Muchas gracias por leer.

Más artículos que te pueden gustar

Aquí hay algunos artículos más que he escrito, ¡también te gustaría leerlos!