Mejoramos la compresión de paquetes en un 40% del tamaño del archivo, al reemplazar el hash estándar con un prefijo de una letra + hash de la ruta del archivo.Los módulos Css le permiten escribir componentes Bird y Cat, con estilos en archivos con el mismo nombre styles.css y .block clases en cada uno, y estas clases serán diferentes para cada uno de estos componentes.
.block { }
.name { }
.block { }
.name { }
Aquí no hay nada complicado: el paquete web extrae cada clase de todos los archivos utilizando la configuración "[hash: base64: 8]". Se cambiará el nombre de todas las clases y se colocarán enlaces para comprender de qué clase proviene. En la versión básica del ensamblaje, tendremos un archivo styles.css para styles y styles.js para enlaces cuando trabajemos con js.Continuando con el caso de prueba, obtenemos 4 clases independientes con nombres extraños como k3bvEft8:
.k3bvEft8 { }
.f2tp3lA9 { }
.epIUQ_6W { }
.oRzvA1Gb { }
Ejecute el ensamblaje de producción y comprima los archivos. En el stand, se empaquetó un archivo css de 300 Kb en 70 Kb con gzip [o 50 Kb con brotli]. La compresión es pequeña porque los hashes son cadenas generadas aleatoriamente que se comprimen muy mal. Los algoritmos de compresión no ven secuencias y se ven obligados a recordar las ubicaciones de cada símbolo, es decir. transfiera el contenido de estas secciones tal cual, sin compresión.Algo debe hacerse con esto. ¿Pero que? Durante la operación, el paquete web lee el árbol de archivos de forma asincrónica y también revisa los nombres de las clases. Cada vez de una manera diferente. Lo único a lo que puede aferrarse es el orden de los nombres dentro de CSS: es constante (de lo contrario, todo se romperá, en CSS el orden es importante). El número de posición de clase en el archivo está codificado en un prefijo de una letra. Puede tomar la codificación en 52 ([a-zA-Z] +) o 64 ([a-zA-Z0-9 _-] +) caracteres. Lo principal aquí es no olvidar poner un prefijo de protección en casos con un número o guión.
.a { }
.b { }
.c { }
.d { }
Parece que se ve bien: los nombres están comprimidos tanto como sea posible. Pero el problema es que el paquete web es asíncrono, y cada lanzamiento, y especialmente cuando los ensamblados simultáneos del servidor y el cliente se lanzan en paralelo, recibe los archivos de manera caótica, al igual que los nombres de clase. Gracias por la velocidad, pero aquí interfiere.
.c { }
.d { }
.a { }
.b { }
Usted ve, captó una falta de coincidencia de orden de archivo.Arreglamos este comportamiento recordando el archivo, de dónde provienen las clases y su número de posición.
.a { }
.b { }
.a { }
.b { }
Guardado el orden dentro de los archivos. Pero necesita distinguir de alguna manera los archivos entre sí. Un hash de la ruta del archivo ayudará a evitar confusiones.
.a_k3bvEft8 { }
.b_k3bvEft8 { }
.a_oRzvA1Gb { }
.b_oRzvA1Gb { }
('_' no es necesario aquí, es solo para fines ilustrativos. El hash tiene una longitud estable, a diferencia del prefijo, y no puede haber colisiones)Hemos obtenido nombres de clase que son absolutamente únicos para el proyecto, pero que contienen secuencias repetidas.En nuestro proyecto, a partir de archivos css 50 Kb y js 47 Kb obtuvimos css 30 Kb y js 28 Kb [58 Kb en total, brotli].Ahorrando casi 40Kb. El tamaño de css crítico y el tamaño de html disminuirán ligeramente.Queda por escribir una clase para procesar datos desde el paquete web y lanzar una llamada en la configuración de css-loader (getLocalIdent)PD: puede ir más allá y guardar las rutas de archivo, ordenar las rutas y también reemplazarlas utilizando una estrategia de una sola letra, pero esto es peor en términos de almacenamiento en caché a largo plazo, además de que necesita hacer varios pases en el ensamblaje y ensamblar el cliente / servidor secuencialmente.PS2 Puede probar su proyecto ahora, si toma el código aquíPS3. En producción, comprimimos los archivos * .css y * style.js en un 93%. Transferimos 71,6Kb desde 1,1Mb del archivo desempaquetado (brotli)