[Optimización del rendimiento web] -Utilice herramientas en línea para comprimir html, js, css

referencia

1. Puntos de aprendizaje

• Utilice herramientas en línea para comprimir html, css, js
• Aprenda a analizar los puntos de mejora de la eficiencia antes y después de la compresión

2. Solución:

2.1 Compresión HTML

1. Compresión online
2. nodejs proporciona la herramienta html-minifier (comprime el código en la capa de compilación)
3. Compresión de renderizado del motor de plantilla back-end
   

2.2 Compresión CSS

1. Utilice html-minifier para comprimir css en html
2. Utilice clean-css para comprimir css

Utilice la compresión en línea como se muestra a continuación.

2.3 js compresión y confusión

1. Use html-minifier para comprimir js en html
2. Utilice uglifyjs2 para comprimir js
3. ps: preste atención a las dependencias
   

3. Comparación de compresión

1. JS fusionado y comprimido
2. Después de la fusión, el tiempo en blanco de la página (DOMContentLoaded) se ha reducido de 2,70 a 936 ms ahora
3. El tiempo de carga de la página (carga) se redujo de 2,93 sa 1,24 ahora