Requisitos: En proyectos anteriores de MVC con .NET Framework, JS, CSS puede agruparse y comprimirse utilizando la biblioteca Microsoft.AspNet.Web.Optimization de Microsoft. Después de usar ASP.NET Core, ¿cómo puedo agrupar y comprimir archivos JS y CSS existentes?
El proyecto .NET Framework hace referencia a lo siguiente:
Código de ejemplo:
encuadernación
El agrupamiento combina varios archivos en un solo archivo. El empaquetado reduce el número de solicitudes de servidor necesarias para renderizar un activo web, como una página web. Puedes crear tantos paquetes individuales como quieras, específicamente para CSS, JavaScript y más. Menos archivos significan desde el navegador al servidor o al servicio que proporciona la aplicaciónMenos solicitudes HTTP。 Esto mejora el rendimiento de carga de la página principal.
comprimir
Elimina caracteres innecesarios de tu código sin cambiar la funcionalidad. El resultado fueEl tamaño de los recursos solicitados, como CSS, imágenes y archivos JavaScript, se reduce significativamente。 Los efectos secundarios comunes de la minificación incluyen acortar los nombres de las variables a un solo carácter y eliminar comentarios y espacios innecesarios. Al mismo tiempo, puedeConfusión del código, lo cual no favorece que otros competidores lean nuestro código fuente.
Mejoras de rendimiento gracias al empaquetar y comprimir
La siguiente tabla describe las diferencias entre cargar activos individualmente y usar empaquetado y minificación:
Ahorra tráfico y mejora la velocidad de carga en términos de transporte de red, además de reducir las solicitudes HTTP y mejorar la velocidad de carga.
Para los encabezados de peticiones HTTP, el navegador es muy detallado. Cuando se agrupa, el total de bytes enviados se reduce significativamente. Los tiempos de carga muestran mejoras significativas, pero este ejemplo se ejecuta localmente. El empaquetado y la minificación pueden combinarse con activos transportados por la red para lograr mayores mejoras de rendimiento.
ASP.NET Core no tiene su propia solución empaquetada y comprimida, y necesita usar una solución proporcionada por un tercero, este artículo utiliza "LigerShark.WebOptimizer.Core(La biblioteca finalmente llamó.)MejorarImplementar manejo JS y CSS), dirección de GitHub:El inicio de sesión del hipervínculo es visible.
Primero, crea un nuevo proyecto ASP.NET Core 6 y ejecuta el siguiente comando para referenciar:
Crea una nueva carpeta estática en el proyecto wwwroot para almacenar los archivos de prueba css y js. Crea un nuevo archivo CSS y JS, como se muestra a continuación:
Modifica el archivo Program.cs y añade el servicio WebOptimizer y el middleware, el código principal es el siguiente:
Cuando intentamos iniciar el proyecto, encontramos que los comentarios tanto del código CSS como del JS han sido eliminados, los archivos comprimidos y algunas variables en JS se han reducido a una sola letra, como se muestra en la figura siguiente:
Luego crea un nuevo archivo js desde la carpeta estática para probar la función de empaquetado.Agrupa test.js y test2.js en un solo archivo common.js(y no genera un archivo físico common.js), el código de configuración es el siguiente:
Las representaciones son las siguientes:
Referencia:
El inicio de sesión del hipervínculo es visible.
El inicio de sesión del hipervínculo es visible.
|
Publicado el 28-3-2022 20:55:50
|
|
|
|
Propietario|
Publicado el 28-3-2022 20:56:47
|
Publicado el 29-03-2022 00:38:21
|
(No sé cómo borrar comentarios duplicados, por favor borra esta publicación cuando el webmaster la vea)