ASP .NET Core MVC – Regrouper et minimiser les fichiers JavaScript et CSS

Présentation
Le regroupement et la minimisation permettent à un navigateur Web, d’obtenir avec un minimum de requêtes HTTP des fichiers JavaScript et CSS avec une implémentation réduite et optimisée.

Mise en œuvre
Pour mettre en œuvre le regroupement et la minimisation :

  • Ajouter le package Nuget nommé BuildBundlerMinifier
  • Ajouter les fichiers CSS et JavaScript
  • Ajouter et implémenter le fichier de configuration nommé bundleconfig.json pour déclarer les bundles
  • Implémenter une vue utilisant ces bundles

Exemple
1 – Dans un projet ASP .NET Core MVC, ajouter le package Nuget nommé BuildBundlerMinifier. Ce package permet de générer les fichiers minimisés et de les empaqueter.
2 – Dans le répertoire wwwroot, ajouter des fichiers JavaScript et CSS. Voici un exemple :

3 – A la racine du projet, ajouter un fichier JSON nommé bundleconfig.json. Voici un exemple d’implémentation :

[
  {
    "outputFileName": "wwwroot/css/Style.min.css",
    "inputFiles": [
      "wwwroot/css/Style1.css",
      "wwwroot/css/Style2.css"
    ]
  },
  {
    "outputFileName": "wwwroot/javascript/Script.min.js",
    "inputFiles": [
      "wwwroot/javascript/bootstrap.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

Lors de la génération du projet, deux fichiers contiendront le résultat de la minimisation et de l’empaquetage des fichiers :

  • wwwroot/css/Style.min.css
  • wwwroot/javascript/Script.min.js

Pour utiliser ces fichiers dans une page Web :

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/css/style1.css" />
        <link rel="stylesheet" href="~/css/style2.css" />
    </environment>

    <environment exclude="Development">
        <link rel="stylesheet" href="~/css/style.min.css" />
    </environment>
</head>
<body>

    <h1>Hello :)</h1>

    <environment include="Development">
        <script type="text/javascript" src="~/javascript/bootstrap.js"></script>
    </environment>

    <environment exclude="Development">
        <script type="text/javascript" src="~/javascript/site.min.js"></script>
    </environment>

</body>
</html>

Le TagPrefix environment permet de fournir aux navigateurs Web les fichiers en fonction de l’environnement de développement défini lors de l’exécution. Dans l’environnement de développement, les fichiers sont lisibles et débugables. Dans les environnements de recette ou de production, les fichiers sont optimisés et empaquetés.

About: James RAVAILLE

Travaillant avec la plateforme Microsoft .NET depuis 2002, j’alterne les missions de formation et d’ingénierie avec cette plateforme. J’écris ce blog pour transmettre mes connaissances à tout développeur, qu’il soit débutant ou expérimenté.