Regroupement et minification sans ASP.NET MVC

En plus des réponses données ci-dessus, je voudrais mentionner qu'il y avait une étape importante oubliée:

Après avoir installé le paquet NuGet pour Microsoft.AspNet.Web.Optimization et enregistré les paquets dans le Global.asax (comme expliqué dans Claies answer), Vous devez ajouter les méthodes de rendu pour les styles et les scripts comme suit:

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

Cela doit être ajouté à la section head de la page ASPX afin de rendre les paquets "~/bundles/js" et "~/bundles/css" ajoutés plus tôt sur votre page. Sans cela, il n'apparaîtra pas (voir pourquoi ai-je besoin de rendre?). Cela nécessite que vous ajoutiez

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

À la ligne 2 de votre page afin d'enregistrer l'espace de noms, en supposant que vous avez déjà ajouté le paquet NUGET Microsoft.AspNet.Web.Optimization à votre code.

Si vous voulez inclure plus de fichiers associés, faites-le comme

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);
}

, Ou plus simplement

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

Qui regroupera tous les 3 scripts sous le chemin virtuel "~/bundles/MattsUIBundle/js".

Important: le regroupement vérifiera si vous êtes en mode débogage ou en mode release. Les optimisations ne s'appliquent que si vous supprimer l'indicateur de débogage dans le web.config

<compilation debug="true" />

, Ou si vous définissez explicitement à l'intérieur de Application_Start vous souhaitez optimiser indépendamment d'être en mode débogage:

BundleTable.EnableOptimizations = true;

De même, si vous utilisez CDN support , activez-le via

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

, Qui vous permettra de déclarer

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"));

Notez {[38] } que le CDN ne sera utilisé qu'en mode release. Le script suivant garantit qu'une copie locale de jQuery est chargée si le chargement du CDN échoue:

    <%= 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> 

En supposant que vous fournissez une copie locale de jQuery 1.7.1 à "~/Scripts".

Remarque: dans la syntaxe MVC Razor, le rendu se fait dans la vue comme suit:

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

Plus d'informations peuvent être trouvées ici.

Pour gagner de la vitesse de chargement des fichiers dans votre SPA, vous avez besoin de temps manuel dans la configuration. La réponse fausse est d'implémenter Razor, surtout si votre objectif était de rester à L'écart de MVC et de ses amis (ce qui est une bonne chose si votre objectif est un AngularJS SPA). Lorsque vous implémentez le cadre D'optimisation mentionné dans d'autres réponses, vous devez maintenant appuyer sur le moteur de vue pour générer des fichiers CSHTML, ce qui est un succès notable à votre vitesse, probablement plus que ce que vous pensez être économie.

Donc, comme je l'ai dit, vous auriez besoin de temps pour les développeurs pour minimiser les fichiers. Vous devrez les envoyer manuellement à un CDN que vous possédez (ou devez configurer). Vous pouvez ensuite référencer votre propre CDN avec vos propres paquets configurés par votre équipe, et ce CDN sera mis en cache par les navigateurs de l'utilisateur.

Ensuite, lorsqu'un ou plusieurs de vos SPA doivent pointer vers HTML/CSS/JS mis à jour, vous incrémentez la version CDN dans cette application SPA. D'autres applications de SPA peuvent même rester les mêmes avec une ancienne version (bien que je recommande d'essayer de s'en tenir à la dernière version CDN). Et les navigateurs de l'utilisateur reconnaîtront la nouvelle version CDN et tireront une nouvelle version dans le cache.

@Matt, en fait, vous n'avez pas besoin d'ajouter

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

Et vous n'avez pas besoin d'utiliser CSHTML-template. Vous pouvez référencer vos bundles de cette façon à partir d'une page html:

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

Il enregistrera votre page du moteur de vue.

Vous pouvez utiliser YUI ou Google Clouser mapper

Voici L'exemple de l'utilisateur YUI avec Visual Studio

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

Ce lien a des Extensions Visual Studio http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

Vous pouvez utiliser JSMIN http://www.crockford.com/javascript/jsmin.html

Vous peut exécuter JsMin comme événement post Build comme ci dessous jsmin " $(ProjectDir)\min.js "

C'est le lien Comment exécuter JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

Si cela répond à votre question, veuillez vérifier à droite sur le côté gauche.

Vous pouvez également utiliser VS extension webessentials minification qui peut réduire vos fichiers JS / css indépendamment de la compilation du projet (de sorte que vous n'avez pas besoin de dépendance dll tierce). Il a regroupement ainsi, très pratique.