c# - studio - MVC4: la agrupación no funciona cuando las optimizaciones se establecen en verdadero

download asp.net mvc 4 for visual studio 2017

Question

Me pregunto qué es lo que no hago aquí. Estoy usando ASP.NET C # MVC4 y quiero utilizar la nueva función de optimización css / js.

Aquí está mi parte HTML

@Styles.Render("~/content/css")

Aquí está mi parte de BunduleConfig.cs

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

// BundleTable.EnableOptimizations = true;

Salida (trabajos):

<link href="/content/css/reset.css" rel="stylesheet"/>
<link href="/content/css/bla.css" rel="stylesheet"/>

Sin embargo, cuando BundleTable.EnableOptimizations = true; La salida html se ve así

<link href="/content/css?v=5LoJebKvQJIN-fKjKYCg_ccvmBC_LF91jBasIpwtUcY1" rel="stylesheet"/>

Y esto es, por supuesto, es 404. No tengo idea de dónde hice algo mal, por favor ayuda, la primera vez que trabajo con MVC4.

Answer 1

Acabo de resolver un problema similar. El problema fue el siguiente, instalé ''elegido'' a través de NuGet . Y en la clase BundleConfig , la línea que incluía el archivo CSS veía así:

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",)); 
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/chosen.css"));

Algunos donde abajo en esa clase tuve esta línea:

BundleTable.EnableOptimizations = true;

La solución era combinar los 2 bundles.Add() manera:

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/site.css", 
                            "~/Content/chosen.css"
                        ));

Y eso lo solucionó por mí.

Answer 2

Eso me parece correcto. Cuando las optimizaciones están habilitadas, solo tendrá una única referencia y será para el nombre que especificó en su StyleBundle (/ content / css). En el modo de depuración (o más específicamente con debug = false en su configuración web) obtendrá los archivos no optimizados de forma normal. Si miras, verás que son solo texto mientras los escribiste. Sin embargo, cuando las optimizaciones están activadas (generalmente cuando se ejecuta en modo de lanzamiento) obtendrá una URL que parece extraña.

Si miras el resultado de eso, se minimizará. La cadena de consulta? V = 5KLoJ .... se basa en un hash tomado de los archivos en el paquete. Esto es para que la referencia se pueda almacenar en caché HTTP de forma segura durante el tiempo que desee. Por siempre si te apetece, pero creo que el valor predeterminado es un año. Sin embargo, si modifica cualquiera de sus hojas de estilo, generará un nuevo hash y eso es "eliminación de memoria caché", por lo que obtendrá una nueva copia en el navegador.

Habiendo dicho todo eso, no estoy seguro de por qué está obteniendo un 404. Sospecho que tiene algo que ver con su configuración de enrutamiento o su configuración de IIS. ¿Estás ejecutando Visual Studio con IISExpress?

Answer 3

Me imagino que el problema es que pone el paquete en una URL virtual que realmente existe, pero es un directorio.

MVC está creando un archivo virtual de su paquete y lo está sirviendo desde la ruta que especifique como la ruta del paquete.

La solución correcta para ese problema es utilizar una ruta de paquete que no se correlacione directamente con un directorio existente, y en su lugar utiliza un nombre de archivo virtual (que tampoco se correlaciona con un nombre de archivo real) dentro de ese directorio.

Ejemplo:

Si su sitio tiene una carpeta llamada / content / css, haga su paquete css de la siguiente manera:

En BundleConfig.cs:

bundles.Add(new StyleBundle("~/content/css/AllMyCss.css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

Y en la página:

@Styles.Render("~/content/css/AllMyCss.css")

Tenga en cuenta que esto supone que NO tiene un archivo llamado AllMyCss.css en su carpeta css.

Answer 4

No estoy seguro si es la optimización web, o WebGrease es tan delicado, pero uno (o ambos) es y debe ser extremadamente cuidadoso.

En primer lugar, no hay nada de malo en tu código:

bundles.Add(new StyleBundle("~/content/css").Include(
                        "~/content/css/reset.css",
                        "~/content/css/bla.css"));

De hecho, esto es exactamente lo que hace Microsoft. La razón principal por la que no usan ~/bundles para css es que las rutas relativas se estropean para las imágenes. Piense en cómo ve su navegador un paquete, exactamente de la misma forma en que ve cualquier otra URL, y todas las reglas relacionadas con la ruta normal aún se aplican con respecto a las rutas relativas. Imagina que tu CSS tiene una ruta de imagen hacia ../images/bullet.png . Si estuvieras utilizando ~/bundles el navegador estaría buscando en un directorio arriba de los bundles que en realidad no existe. Probablemente terminará buscando en ~/images donde probablemente lo tengas en ~/content/images .

He encontrado un par de cosas que realmente pueden romperlo y causar errores 404:

• FYI: Mi estructura de directorio es Content/CSS que contiene una carpeta de images para imágenes CSS.
• Tengo EnableOptimizations=true para forzar el uso de paquetes durante la prueba
• Lo primero que debe hacer es ''Ver fuente'' y simplemente haga clic en los enlaces CSS para ver si funcionan

Digamos que estamos desarrollando un sitio sobre gatos. Puedes tener esto

 @Styles.Render("~/Content/css/cats.css")    // dont do this - see below why

 bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

Esto genera un enlace CSS a esta ruta en tu HTML:

/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1

Sin embargo, esto dará un 404 porque puse una extensión .css e IIS (creo) se confunde.

Si lo cambio a esto, entonces funciona bien:

 @Styles.Render("~/Content/css/cats")

 bundles.Add(new StyleBundle("~/content/css/cats").Include(
                    "~/content/css/reset.css",
                    "~/content/css/bla.css"));

Otro problema ya señalado por otros es que no debes hacer

 @Styles.Render("~/Content/css")

si tiene un directorio o archivo css (es poco probable que tenga un archivo llamado css sin extensión) en su directorio de Content .

Un truco adicional es que debes asegurarte de que tu HTML generado tenga un número de versión

<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>

Si no es así y se ve así, es probable que no tenga una coincidencia exacta para el nombre del paquete entre su tabla de paquetes y su archivo cshtml.

<link href="/Content/css/cats" rel="stylesheet"/>

Answer 5

No se olvide de asegurarse de que la agrupación de HttpModule esté allí.

<modules>  
  <remove name="BundleModule" />  
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />  
</modules>

Esto me picó la primera vez. No estoy seguro de si el paquete NuGet debe agregar la configuración necesaria, pero no fue en mi caso.

Answer 6

También podría ser porque no ha implementado bundleconfig.json en el servidor por algún motivo.