Utilisation des bundles jquery / javascript ASP.NET MVC4
lorsque j'ai créé mon projet avec le modèle MVC4 standard, il y avait BEAUCOUP de javascript inclus, par exemple: jquery-intrusive, jquery-validate, knockout, l'intégralité de l'interface utilisateur jQuery.
Quelle quantité de cela vaut la peine d'être conservée et quelle quantité est jetée? J'ai remarqué que lorsque vous créez un contrôleur fortement typé, la vue create.cshtml génère des appels:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Que fait exactement ce fichier? Dois-je le garder? Dois-je faire référence à tous ces fichiers JS initialement définis dans BundleConfig.cs? Ou puis-je pas déranger ..?
Que fait exactement ce fichier?
jqueryval n'est pas un fichier, c'est une référence à un bundle.
Un bundle dans MVC4 est une collection de scripts, de styles ou d'autres fichiers regroupés en un seul bundle.
Vous aurez un BundleConfig.cs fichier dans le App_Start dossier, qui contient les paramètres de quel fichier est ajouté à quel bundle.
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
Comme vous pouvez le voir ci-dessus ~/bundles/jqueryval est le chemin virtuel du bundle qui combine les fichiers qui y sont spécifiés. Donc, plus tard, lorsque vous verrez ceci:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Ce qui précède inclura les scripts fournis sous cette référence.
Dois-je le garder? Dois-je faire référence à tous ces fichiers JS initialement définis dans BundleConfig.cs?
Dans le cas du bundle jqueryval, vous pourriez trouver que les scripts discrets et de validation inclus sont très utiles.
Ce sont les scripts qui se chargeront de gérer la validation discrète, en gardant votre DOM agréable et propre.
Vous pouvez supprimer le pack hors cours si vous n'avez pas besoin ou si vous souhaitez utiliser une validation discrète. Si vous le faites, je pense que vous devrez également mettre à jour votre web.config, définissant les champs obligatoires sur false pour garantir que votre projet ne recherchera pas les fichiers, comme ceci:
<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />
L'avantage et la différence exacte entre l'utilisation de la validation intrusive et discrète sont très bien expliqués dans cet article: Brad Wilson: validation discrète du client dans ASP.NET MVC 3
En général, je suppose qu'il est bon d'inclure uniquement ce dont vous avez besoin. Si vous n'avez pas besoin de tous les fichiers spécifiés dans un ensemble, supprimez ces fichiers, excluez l'ensemble ensemble ou créez vos propres ensembles personnalisés.
Essai et erreur. Si vous les supprimez et trouvez des exceptions aléatoires dans la console de débogage de votre navigateur, essayez de rajouter certains fichiers/ensembles.
En général, le regroupement fonctionne également avec les feuilles de style:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
L'avantage pour le développeur est d'avoir seulement à référencer un ensemble individuel au lieu de plusieurs fichiers.
L'avantage pour le client est le nombre de charges individuelles que le navigateur doit faire pour obtenir les fichiers scripts/css.
Si vous avez par exemple 5 références de fichiers dans votre vue, le navigateur client téléchargera les 5 séparément et il y a une limite dans chaque navigateur combien de fichiers peuvent être téléchargés simultanément. Cela signifie que si un client a une connexion plus lente, il peut attendre quelques secondes avant le chargement des fichiers.
Cependant, si les 5 fichiers sont configurés pour être regroupés en un seul ensemble, le navigateur télécharge uniquement 1 fichier, celui fourni.
De plus, les bundles sont minifiés (ou les fichiers dans les bundles), vous économisez donc non seulement sur le temps nécessaire au téléchargement des scripts mais également sur la taille du téléchargement.
Lorsque vous testez cela, notez qu'en mode débogage ne fait aucune différence, vous devez être en mode release ou activer l'optimisation de la table de bundle dans le BundleConfig.cs fichier en bas de la méthode RegisterBundles.
BundleTable.EnableOptimizations = true;
Vous n'avez pas besoin d'utiliser les bundles, vous pouvez toujours référencer librement des scripts/fichiers CSS individuels. Cela rend les choses plus faciles quand vous en avez besoin.
MVC4 et .Net Framework 4.5 offrent des techniques de regroupement et de minification qui réduisent le nombre de requêtes vers le serveur et la taille de la bibliothèque CSS et JavaScript demandée, ce qui améliore le temps de chargement des pages dans Simple Word, les performances des pages augmentent et la page se charge plus rapidement.
La classe System.Web.Optimization offre les techniques de regroupement et de minification qui existent avec la DLL Microsoft.Web.Optimization.
Qu'est-ce que Bundle Un bundle est un groupe logique de fichiers qui est chargé avec une seule requête HTTP. Vous pouvez créer respectivement un style et un ensemble de scripts pour css et javascripts en appelant la méthode Add () de la classe BundleCollection dans le fichier BundleConfig.cs.
Création d'un ensemble de styles
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.min.css",
"~/Content/mystyle.min.css"));
Création d'un ensemble de scripts
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery-1.7.1.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js"));