Unión y minimización de recursos estáticos en ASP.NET CoreBundle and minify static assets in ASP.NET Core

Por Scott Addie y David PineBy Scott Addie and David Pine

En este artículo se explican las ventajas de aplicar la unión y la minimización, así como la forma en que estas características se pueden utilizar con aplicaciones web de ASP.NET Core.This article explains the benefits of applying bundling and minification, including how these features can be used with ASP.NET Core web apps.

¿Qué son la unión y la minimización?What is bundling and minification

La unión y la minimización son dos optimizaciones de rendimiento distintas que se pueden aplicar en una aplicación web.Bundling and minification are two distinct performance optimizations you can apply in a web app. Usadas de forma conjunta, la unión y la minimización mejoran el rendimiento al reducir el número de solicitudes de servidor y el tamaño de los recursos estáticos solicitados.Used together, bundling and minification improve performance by reducing the number of server requests and reducing the size of the requested static assets.

La unión y la minimización mejoran principalmente el tiempo de carga de la solicitud de la primera página.Bundling and minification primarily improve the first page request load time. Una vez solicitada una página web, el explorador almacena en caché los recursos estáticos (JavaScript, CSS e imágenes).Once a web page has been requested, the browser caches the static assets (JavaScript, CSS, and images). Por lo tanto, la unión y la minimización no mejoran el rendimiento cuando solicitan la misma página (o páginas) en el mismo sitio que solicita los mismos recursos.So, bundling and minification don't improve performance when requesting the same page, or pages, on the same site requesting the same assets. Si el encabezado Expires no se establece correctamente en los recursos y no se usa la unión y la minimización, la heurística de actualización del explorador marca los recursos obsoletos pasados unos días.If the expires header isn't set correctly on the assets and if bundling and minification isn't used, the browser's freshness heuristics mark the assets stale after a few days. Además, el explorador requiere una solicitud de validación para cada recurso.Additionally, the browser requires a validation request for each asset. En este caso, la unión y la minimización proporcionan una mejora del rendimiento incluso después de la solicitud de la primera página.In this case, bundling and minification provide a performance improvement even after the first page request.

UniónBundling

La unión combina varios archivos en un único archivo.Bundling combines multiple files into a single file. La unión reduce el número de solicitudes de servidor necesarias para representar un recurso web, como una página web.Bundling reduces the number of server requests that are necessary to render a web asset, such as a web page. Puede crear cualquier número de conjuntos individuales específicamente para CSS, JavaScript, etc. Menos archivos son menos solicitudes HTTP del explorador al servidor, o del servicio que proporciona la aplicación.You can create any number of individual bundles specifically for CSS, JavaScript, etc. Fewer files mean fewer HTTP requests from the browser to the server or from the service providing your application. Esto tiene como resultado una mejora en el rendimiento de la carga de la primera página.This results in improved first page load performance.

MinimizaciónMinification

La minimización quita caracteres innecesarios del código sin modificar la funcionalidad.Minification removes unnecessary characters from code without altering functionality. El resultado es una reducción significativa del tamaño de los recursos solicitados (tales como CSS, imágenes y archivos de JavaScript).The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files). Los efectos secundarios habituales de la minimización incluyen acortar nombres de variable a un carácter y quitar comentarios y espacios en blanco innecesarios.Common side effects of minification include shortening variable names to one character and removing comments and unnecessary whitespace.

Considere la siguiente función de JavaScript:Consider the following JavaScript function:

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

La minimización reduce la función a lo siguiente:Minification reduces the function to the following:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Además de quitar los comentarios y los espacios en blanco innecesarios, se ha cambiado el nombre de los siguientes parámetros y variables de la siguiente manera:In addition to removing the comments and unnecessary whitespace, the following parameter and variable names were renamed as follows:

OriginalOriginal Se cambia el nombreRenamed
imageTagAndImageID t
imageContext a
imageElement r

Impacto de la unión y la minimizaciónImpact of bundling and minification

En la tabla siguiente se describen las diferencias entre la carga de recursos de forma individual y el uso de la unión y la minimización:The following table outlines differences between individually loading assets and using bundling and minification:

AcciónAction Con U/MWith B/M Sin U/MWithout B/M CambioChange
Solicitudes de archivosFile Requests 77 1818 157 %157%
KB transferidosKB Transferred 156156 264,68264.68 70%70%
Tiempo de carga (ms)Load Time (ms) 885885 23602360 167 %167%

Los exploradores son bastante detallados en lo relativo a los encabezados de las solicitudes HTTP.Browsers are fairly verbose regarding HTTP request headers. La métrica del número total de bytes enviados ha mostrado una reducción considerable al aplicar la unión.The total bytes sent metric saw a significant reduction when bundling. El tiempo de carga muestra una mejora considerable, si bien este ejemplo se ha ejecutado localmente.The load time shows a significant improvement, however this example ran locally. Se obtienen mayores mejoras de rendimiento al usar la unión y la minimización con recursos transferidos a través de una red.Greater performance gains are realized when using bundling and minification with assets transferred over a network.

Elección de una estrategia de unión y minimizaciónChoose a bundling and minification strategy

ASP.NET Core es compatible con WebOptimizer, una solución de unión y minificación de código abierto.ASP.NET Core is compatible with WebOptimizer, an open-source bundling and minification solution. Para acceder a las instrucciones de configuración y proyectos de muestra, consulte WebOptimizer.For set up instructions and sample projects, see WebOptimizer. ASP.NET Core no proporciona una solución de unión y minificación nativa.ASP.NET Core doesn't provide a native bundling and minification solution.

Herramientas de terceros como Gulp y Webpack proporcionan automatización de flujos de trabajo para la unión y minificación, así como optimización de imágenes y linting.Third-party tools, such as Gulp and Webpack, provide workflow automation for bundling and minification, as well as linting and image optimization. Mediante el uso de la unión y la minimización en tiempo de diseño, los archivos minimizados se crean con anterioridad a la implementación de la aplicación.By using design-time bundling and minification, the minified files are created prior to the app's deployment. La unión y la minimización antes de la implementación proporcionan la ventaja de reducir la carga del servidor.Bundling and minifying before deployment provides the advantage of reduced server load. Sin embargo, es importante reconocer que la unión y la minimización en tiempo de diseño aumentan la complejidad de la compilación y solo funcionan con archivos estáticos.However, it's important to recognize that design-time bundling and minification increases build complexity and only works with static files.

Unión y minimización basadas en entornoEnvironment-based bundling and minification

Como procedimiento recomendado, los archivos unidos y minimizados de la aplicación deben usarse en un entorno de producción.As a best practice, the bundled and minified files of your app should be used in a production environment. Durante el desarrollo, los archivos originales facilitan la depuración de la aplicación.During development, the original files make for easier debugging of the app.

Especifique los archivos que se van a incluir en las páginas mediante el Asistente de etiquetas de entorno en las vistas.Specify which files to include in your pages by using the Environment Tag Helper in your views. El Asistente de etiquetas de entorno solo representa su contenido cuando se ejecuta en entornos concretos.The Environment Tag Helper only renders its contents when running in specific environments.

La etiqueta environment siguiente representa los archivos CSS no procesados cuando se ejecuta en el entorno Development:The following environment tag renders the unprocessed CSS files when running in the Development environment:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

La etiqueta environment siguiente representa los archivos CSS unidos y minimizados cuando se ejecuta en un entorno distinto de Development.The following environment tag renders the bundled and minified CSS files when running in an environment other than Development. Por ejemplo, la ejecución en Production o Staging desencadena la representación de estas hojas de estilo:For example, running in Production or Staging triggers the rendering of these stylesheets:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Recursos adicionalesAdditional resources