c# - mvc - forms asp net core

Agrupación y minificación sin ASP.NET MVC

Question

¿Es posible usar agrupación y minificación de Microsoft.AspNet.Web.Optimization sin tener un proyecto de MVC?

Estoy creando un sitio AngularJS que se comunica con una API REST. Para la API REST estoy usando API web ASP.NET. También creé una "Aplicación web vacía de ASP.NET". Solo hay archivos HTML, js y CSS en este proyecto (y un web.config). Me gustaría que mis archivos js y CSS se agrupen y minimicen, pero no quiero crear un proyecto de MVC solo para obtenerlo. ¿Es posible?

Answer 1

@Matt, en realidad no necesitas agregar

<%@ Import Namespace="System.Web.Optimization" %>
<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

Y no necesita usar CSHTML-template. Puede hacer referencia a sus paquetes de esta manera desde una página html:

<link href="bundles/css" rel="stylesheet"/>
<script src="bundles/MattsUIBundle/js"></script>

Guardará su página de View Engine.

Answer 2

Además de las respuestas dadas anteriormente, me gustaría mencionar que hubo un paso importante olvidado:

Después de instalar el paquete NuGet para Microsoft.AspNet.Web.Optimization y registrar los paquetes en Global.asax (como se explica en la respuesta de Claies ), debe agregar los métodos de representación para estilos y scripts de la siguiente manera:

<%= Styles.Render("~/bundles/css") %>
<%= Scripts.Render("~/bundles/MattsUIBundle/js") %>

Esto debe agregarse a la sección principal de la página ASPX para que los paquetes "~ / bundles / js" y "~ / bundles / css" se agreguen antes a su página. Sin eso, no aparecerá (ver por qué necesito renderizar ). Requiere que agregues

<%@ Import Namespace="System.Web.Optimization" %>

a la línea 2 de su página para registrar el espacio de nombres, suponiendo que ya ha agregado el paquete NUGET Microsoft.AspNet.Web.Optimization a su código.

Si desea incluir más archivos relacionados, hágalo como

void Application_Start()
{
BundleCollection bundles=BundleTable.Bundles;
var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js");
jsMattsBundle.Include("~/Scripts/lib/jquery.min.js");
jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js");
jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js");
bundles.Add(jsMattsBundle);
}

o más simplemente

 jsMattsBundle.Include("~/Scripts/lib/jquery.min.js",
"~/Scripts/lib/jquery-ui.custom.min.js",
"~/Scripts/lib/jquery.watermark.min.js");

Eso "~/bundles/MattsUIBundle/js" los tres scripts en la ruta virtual "~/bundles/MattsUIBundle/js" .

Importante: El agrupamiento verificará si se encuentra en modo de depuración o en modo de lanzamiento. Las optimizaciones solo se aplican si elimina el indicador de depuración en web.config

<compilation debug="true" />

o si define explícitamente dentro de Application_Start que desea optimizar independientemente de estar en modo de depuración:

BundleTable.EnableOptimizations = true;

Del mismo modo, si está utilizando la compatibilidad con CDN , actívela a través de

BundleTable.Bundles.UseCdn = true; //enable CDN support

que te permitirá declarar

var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery",
jqueryCdnPath).Include("~/Scripts/jquery-{version}.js"));

Tenga en cuenta que la CDN solo se utilizará en el modo de lanzamiento. La siguiente secuencia de comandos garantiza que se carga una copia local de jQuery si falla la carga CDN:

 <%= Scripts.Render("~/bundles/jquery") %>
<script type="text/javascript">
if (typeof jQuery == ''undefined'') {
var e = document.createElement(''script'');
e.src = ''@Url.Content("~/Scripts/jquery-1.7.1.js")'';
e.type = ''text/javascript'';
document.getElementsByTagName("head")[0].appendChild(e);
}
</script>

asumiendo que está proporcionando una copia local de jQuery 1.7.1 en "~/Scripts" .

Nota: En MVC Razor, la representación de sintaxis se realiza en la vista de la siguiente manera:

@Scripts.Render("~/bundles/MattsUIBundle/js")
@Styles.Render("~/bundles/css")

Más información se puede encontrar here.

Answer 3

Es absolutamente posible utilizar el agrupamiento y la minificación en un proyecto en blanco.

1. Use Nuget para instalar el paquete: Install-Package Microsoft.AspNet.Web.Optimization

2. Crea una clase BundleConfig y define tus paquetes:

   using System.Web.Optimization;
   public class BundleConfig
   {
   public static void RegisterBundles(BundleCollection bundles)
   {
   bundles.Add(new ScriptBundle("~/bundles/js").Include(
   "~/Scripts/*.js"));
   bundles.Add(new StyleBundle("~/bundles/css").Include(
   "~/Styles/*.css"));
   }
   }

3. Registre la clase BundleConfig dentro del inicio de la aplicación en el archivo global.asax

   void Application_Start(object sender, EventArgs e)
   {
   BundleConfig.RegisterBundles(BundleTable.Bundles);
   }

4. Haga referencia a los paquetes en su documento HTML.
5. Habilite la agrupación deshabilitando el modo de depuración.

Answer 4

Para obtener velocidad de carga de archivos en su SPA, necesita tiempo manual en la configuración. La respuesta incorrecta es implementar Razor, especialmente si su objetivo general era mantenerse alejado de MVC y sus amigos (lo cual es bueno si su objetivo es un SPA AngularJS). Cuando implemente el marco de optimización mencionado en otras respuestas, ahora debe presionar View Engine para crear archivos CSHTML, que es un golpe notable a su velocidad, probablemente más de lo que cree que está guardando.

Entonces, como dije, necesitarás tiempo de desarrollador para minimizar los archivos. Tendría que enviarlos manualmente a un CDN de su propiedad (o necesidad de configurarlo). A continuación, puede hacer referencia a su propia CDN con sus propios paquetes configurados por su equipo, y CDN será almacenada en caché por los navegadores del usuario.

Luego, cuando uno o más de sus SPA necesitan apuntar a HTML / CSS / JS actualizado, usted incrementa la versión CDN en esa aplicación SPA. Otras aplicaciones de SPA pueden permanecer igual con una versión anterior (aunque recomiendo tratar de apegarse a la última versión de CDN). Y los navegadores del usuario reconocerán la nueva versión de CDN y extraerán una nueva versión a la memoria caché.

Answer 5

Puede usar YUI o Google Clouser Mapper

Este es el ejemplo de cómo usar YUI con Visual Studio

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

Este enlace tiene extensiones de Visual Studio http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

Puede usuario JSMIN http://www.crockford.com/javascript/jsmin.html

Puede ejecutar JsMin como evento de compilación posterior como se indica a continuación jsmin <"$ (ProjectDir) / debug.js"> "$ (ProjectDir) / min.js"

Este es el enlace de cómo ejecutar JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

Si esto respondió a su pregunta, por favor verifique a la derecha en el lado izquierdo.

Answer 6

También puede usar la minificación de extensión VS WebEssentials que puede minimizar sus archivos js / css independientemente de la compilación del proyecto (para que no necesite ninguna dependencia de dll de terceros). También tiene paquetes, muy conveniente.