Quita el código que no se use

Houssein Djirdeh

Para seguir este codelab, abre este error en una segunda pestaña.

Nota: En este codelab, se usan las Herramientas para desarrolladores de Chrome. Si aún no lo tienes, descarga Chrome.

En este codelab, mejorarás el rendimiento de la siguiente aplicación de la siguiente manera: y quitar las dependencias innecesarias y sin usar.

Medir

Nota: Dado que se usa webpack en esta aplicación, cualquier cambio que se realice en el código activará una compilación nueva que puede tardar unos segundos. Una vez que se complete el proceso, deberías ver los cambios reflejados en la aplicación.

Siempre es una buena idea medir primero el rendimiento de un sitio web agregando optimizaciones.

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa

Haz clic en tu gatito favorito. de Firebase Realtime Database es que se usa en esta aplicación. Por eso, la puntuación se actualiza en tiempo real y es sincronizada con las demás personas que usan la aplicación. 🐈

1. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
2. Haga clic en la pestaña Red.
3. Selecciona la casilla de verificación Inhabilitar caché.
4. Vuelve a cargar la app.

Se está enviando casi 1 MB de JavaScript para cargar esta sencilla aplicación.

Observa las advertencias del proyecto en Herramientas para desarrolladores.

• Haz clic en la pestaña Consola.
• Asegúrate de que Warnings esté habilitado en el menú desplegable de niveles junto al Entrada Filter

• Observa la advertencia que se muestra.

Firebase, que es una de las bibliotecas que se usan en esta aplicación, será un como buen samaritano con una advertencia para que los desarrolladores sepan que no deben importar paquete completo, pero solo los componentes que se usan. En otras palabras, hay bibliotecas sin usar que se pueden quitar de esta aplicación para que se cargue más rápido.

También hay casos en los que se usa una biblioteca en particular, pero en las que puede alternativa más sencilla. El concepto de quitar bibliotecas innecesarias es más adelante en este instructivo.

Analiza el paquete

La aplicación tiene dos dependencias principales:

• Firebase: Es una plataforma que proporciona diferentes útiles para aplicaciones web, de iOS y de Android. Aquí, vemos el tiempo real Database se usa para almacenar y sincronizar la información de cada gatito en tiempo real.
• Moment.js: una biblioteca de utilidades que facilita la creación administrar fechas en JavaScript. La fecha de nacimiento de cada gatito se almacena en la La base de datos de Firebase y moment se usa para calcular su antigüedad en semanas.

¿Cómo pueden dos dependencias contribuir a un tamaño de paquete de casi 1 MB? Bueno, una de las razones es que cualquier dependencia puede tener su propia las dependencias, por lo que hay mucho más que solo dos si cada profundidad o rama de la dependencia "árbol" una decisión. Es fácil que una aplicación se vuelva grande relativamente rápido si se incluyen muchas dependencias.

Analiza el agrupador para tener una mejor idea de lo que sucede. Existen varias diferentes herramientas creadas por la comunidad que pueden ayudar en esto, como webpack-bundle-analyzer

El paquete de esta herramienta ya está incluido en la app como devDependency.

"devDependencies": {
  //...
  "webpack-bundle-analyzer": "^2.13.1"
},

Esto significa que puede usarse directamente en el archivo de configuración de webpack. Impórtalo al comienzo de webpack.config.js:

const path = require("path");

//...
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

Ahora, agrégalo como complemento al final del archivo dentro del array plugins:

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
};

Cuando la aplicación se vuelva a cargar, deberías ver una visualización de toda en lugar de la app en sí.

No es tan adorable como ver unos gatitos Draft, pero es muy útil. Si colocas el cursor sobre cualquiera de los paquetes, se mostrará su tamaño representado en tres maneras diferentes:

Tamaño de las estadísticas	Tamaño antes de cualquier reducción o compresión.
Tamaño analizado	Tamaño del paquete real dentro del paquete después de su compilación. La versión 4 de webpack (que se usa en esta aplicación) reduce la los archivos compilados automáticamente, por lo que es más pequeño que la estadística de tamaño del ensamble.
Tamaño comprimido en Gzip	Tamaño del paquete después de comprimirse con la codificación gzip. Esta el mismo tema se aborda en una guía aparte.

Con webpack-bundle-analyzer, es más fácil identificar aplicaciones paquetes innecesarios que conforman un gran porcentaje del paquete.

Cómo quitar paquetes sin utilizar

La visualización muestra que el paquete firebase consta de mucho más es más que una base de datos. Incluye paquetes adicionales, como los siguientes:

• firestore
• auth
• storage
• messaging
• functions

Estos son excelentes servicios que proporciona Firebase (y puedes hacer referencia al documentación para obtener más información), pero ninguna de ellas se usa en la aplicación, por lo que y no hay razón para importarlos todos.

Revierte los cambios en webpack.config.js para volver a ver la aplicación:

• Quita BundleAnalyzerPlugin de la lista de complementos:

plugins: [
  //...
  new BundleAnalyzerPlugin()
];

• Ahora, quita la importación sin usar de la parte superior del archivo:

const path = require("path");

//...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Ahora, la aplicación debería cargarse normalmente. Modifica src/index.js para actualizar Importaciones de Firebase.

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

Ahora, cuando se vuelva a cargar la app, no se mostrará la advertencia de Herramientas para desarrolladores. Abriendo El panel Network de Herramientas para desarrolladores también muestra una bonita reducción en el tamaño del paquete:

Se quitó más de la mitad del tamaño del paquete. Firebase ofrece muchas funciones y brinda a los desarrolladores la opción de incluir solo aquellos que según sea necesario. En esta aplicación, solo se usó firebase/database para almacenar y sincronizar. todos los datos. La importación firebase/app, que configura la superficie de la API para cada uno de los diferentes servicios.

Muchas otras bibliotecas populares, como lodash, también permiten a los desarrolladores hacer lo siguiente: importar de forma selectiva partes de sus paquetes. Sin hacer mucho trabajo, actualizar las importaciones de la biblioteca en una aplicación para que solo incluya lo que se usa puede generar mejoras significativas en el rendimiento.

Aunque el tamaño del paquete se redujo bastante, todavía hay más de tu trabajo. 😈

Cómo quitar paquetes innecesarios

A diferencia de Firebase, no se pueden importar partes de la biblioteca moment como fácilmente, pero quizás pueda quitarse por completo?

El cumpleaños de cada gatito se almacena en formato Unix (milisegundos) en la base de datos de Firebase.

Se trata de una marca de tiempo de una fecha y hora concreta representada por el número de milisegundos que transcurrieron desde el 1 de enero de 1970 a las 00:00 UTC. Si el estado la fecha y la hora se pueden calcular con el mismo formato, una función pequeña para encontrar la la edad de cada gatito en semanas.

Como siempre, trata de no copiar y pegar a medida que avanzas. Comienza a las quitando moment de las importaciones en src/index.js.

import firebase from 'firebase/app';
import 'firebase/database';
import * as moment from 'moment';

Hay un objeto de escucha de eventos de Firebase que controla los cambios de valores en nuestra base de datos:

favoritesRef.on("value", (snapshot) => { ... })

Arriba de esto, agrega una pequeña función para calcular la cantidad de semanas de un fecha determinada:

const ageInWeeks = birthDate => {
  const WEEK_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 7;
  const diff = Math.abs((new Date).getTime() - birthDate);
  return Math.floor(diff / WEEK_IN_MILLISECONDS);
}

En esta función, la diferencia en milisegundos entre la fecha actual y hora (new Date).getTime() y la fecha de nacimiento (el argumento birthDate, ya en milisegundos) se calcula y se divide por el número de milisegundos de una en una sola semana.

Por último, todas las instancias de moment se pueden quitar del objeto de escucha de eventos. aprovechando esta función:

favoritesRef.on("value", (snapshot) => {
  const { kitties, favorites, names, birthDates } = snapshot.val();
  favoritesScores = favorites;

  kittiesList.innerHTML = kitties.map((kittiePic, index) => {
    const birthday = moment(birthDates[index]);

    return `
      <li>
        <img src=${kittiePic} onclick="favKittie(${index})">
        <div class="extra">
          <div class="details">
            <p class="name">${names[index]}</p>
            <p class="age">${moment().diff(birthday, 'weeks')} weeks old</p>
            <p class="age">${ageInWeeks(birthDates[index])} weeks old</p>
          </div>
          <p class="score">${favorites[index]} ❤</p>
        </div>
      </li>
    `})
});

Ahora, vuelve a cargar la aplicación y observa el panel Red una vez más.

El tamaño del paquete se redujo a más de la mitad otra vez.

Conclusión

Con este codelab, comprenderás bien cómo analizar un paquete en particular y por qué puede ser tan útil quitar los elementos no utilizados o innecesarios paquetes. Antes de comenzar a optimizar una aplicación con esta técnica, es importante Es importante saber que esto puede ser mucho más complejo en aplicaciones.

Con respecto a la eliminación de bibliotecas no utilizadas, intenta averiguar qué partes de un qué paquete se usan y cuáles no. Para una mirada misteriosa que parece que no se está usando en ningún lado, retrocede y verifica qué dependencias de nivel superior podrían necesitarlo. Trata de encontrar una manera de separarlos entre sí.

Cuando se trata de quitar bibliotecas innecesarias, es posible que sea un poco más difícil. complicada. Es importante trabajar en estrecha colaboración con el equipo potencial para simplificar partes de la base de código. Quitando moment de esta puede parecer que sería lo correcto cada vez, pero lo que si hubieran que controlar zonas horarias y diferentes configuraciones regionales? O ¿qué pasaría si hubiera manipulaciones de fechas más complicadas? Las cosas pueden volverse muy difícil cuando se manipulan y analizan fechas y horas, y bibliotecas como moment y date-fns simplifican esto de forma significativa.

Todo es una desventaja y es importante evaluar si vale la pena la complejidad y el esfuerzo necesarios para implementar una solución personalizada en lugar de depender de un o biblioteca de terceros.