Exigences : Dans les précédents projets MVC du .NET Framework, JS, CSS peut être regroupé et compressé à l’aide de la bibliothèque Microsoft.AspNet.Web.Optimization de Microsoft. Après avoir utilisé ASP.NET Core, comment puis-je regrouper et compresser les fichiers JS et CSS existants ?
Le projet .NET Framework fait référence aux éléments suivants :
Code exemple :
reliure
Le regroupement combine plusieurs fichiers en un seul fichier. Le regroupement réduit le nombre de requêtes serveur nécessaires pour afficher un asset web, comme une page web. Vous pouvez créer autant de bundles individuels que vous le souhaitez spécifiquement pour le CSS, JavaScript, et plus encore. Moins de fichiers signifient que le navigateur est le serveur ou le service qui fournit l’applicationMoins de requêtes HTTP。 Cela améliore les performances de chargement de la page d’accueil.
compresse
Modifiez la suppression des caractères inutiles de votre code sans modifier les fonctionnalités. Le résultat futLa taille des ressources demandées, telles que CSS, images et fichiers JavaScript, est significativement réduite。 Les effets secondaires courants de la minification incluent le raccourcissement des noms de variables à un seul caractère et la suppression des commentaires et des espaces inutiles. En même temps, cela peut être le casConfusion dans le code, ce qui n’est pas favorable à la lecture de notre code source par d’autres concurrents.
Gains de performance grâce au regroupement et à la compression
Le tableau suivant présente les différences entre le chargement individuel des actifs et l’utilisation du regroupement et de la minification :
Cela permet d’économiser du trafic et d’améliorer la vitesse de chargement en termes de transport réseau, tout en réduisant les requêtes HTTP et en améliorant la vitesse de chargement.
Pour les en-têtes de requête HTTP, le navigateur est très détaillé. Lorsqu’elle est regroupée, la métrique totale d’octets envoyés est significativement réduite. Les temps de chargement montrent des améliorations significatives, mais cet exemple s’exécute localement. Le regroupement et la minification peuvent être combinés avec les actifs transportés sur le réseau pour obtenir des gains de performance plus élevés.
ASP.NET Core ne dispose pas de sa propre solution groupée et compressée, et doit utiliser une solution fournie par un tiers, cet article utilise «LigerShark.WebOptimizer.Core(La bibliothèque finit par appeler.)NUglifyImplémentez la gestion JS et CSS), adresse GitHub :La connexion hyperlientérée est visible.
Commencez par créer un nouveau projet ASP.NET Core 6 et exécutez la commande suivante pour référencer :
Créez un nouveau dossier statique dans le projet wwwroot pour stocker les fichiers CSS et JS de test. Créez un nouveau fichier CSS et JS, comme montré ci-dessous :
Modifiez le fichier Program.cs et ajoutez le service WebOptimizer et le middleware, le code principal est le suivant :
Lorsque nous essayons de lancer le projet, nous constatons que les commentaires du code CSS et JS ont été supprimés, les fichiers compressés, et certaines variables dans JS ont été réduites à une seule lettre, comme montré dans la figure ci-dessous :
Ensuite, crée un nouveau fichier js à partir du dossier statique pour tester la fonction de regroupement.Regroupez test.js et test2.js dans un seul fichier common.js(et ne génère pas de fichier physique common.js), le code de configuration est le suivant :
Les rendus sont les suivants :
Référence:
La connexion hyperlientérée est visible.
La connexion hyperlientérée est visible.
|
Publié le 28-03-2022 à 20:55:50
|
|
|
|
Propriétaire|
Publié le 28-03-2022 à 20:56:47
|
Publié le 29-03-2022 00:38:21
|
(Je ne sais pas comment supprimer les commentaires en double, merci de supprimer ce post quand le webmaster le verra)