《学习笔记》.NET MVC中使用BundleConfig来配置公用JS和CSS文件，节省前端页面代码

使用背景：

　　当我们引入前端框架是发现我们页面中每次都要重新引入一遍JS和CSS样式文件，若框架复杂我们会在我们的HTML（CSHTML）页面中引入很多JS和CSS文件，而且每次都是引用相同的文件，那么我们就需要使用BundleConfig来将公用JS和CSS文件提取出来，对相同的文件可以进行统一化管理和快速调用

使用方法：

右击项目点击管理NuGet程序包
搜索 Microsoft.AspNet.Web.Optimization 点击安装
在App_Start中创建 BundleConfig 文件

配置需要提取出来的公用JS和CSS文件代码如下

/// <summary>
        /// 配置JS和CSS文件
        /// </summary>
        /// <param name="bundles"></param>
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Bundles/js").Include(
                       "~/Scripts/jquery-3.4.1.min.js"));

            bundles.Add(new StyleBundle("~/Bundles/css").Include(
                "~/fontawesome-free-5.11.2-web/css/brands.min.css",
                "~/fontawesome-free-5.11.2-web/css/fontawesome.min.css",
                  "~/fontawesome-free-5.11.2-web/css/solid.min.css"
                 ));
        }

在Global.asax文件中加一句话 BundleConfig.RegisterBundles(BundleTable.Bundles);并且导入using System.Web.Optimization;和using RomanticFlowerHouseUI（项目名称）.App_Start;

在Views目录下面的web.config中加入配置信息加入 <add namespace="System.Web.Optimization" />

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="RomanticFlowerHouseUI" />
        <add namespace="System.Web.Optimization" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

在CSHTML页面顶部或者加载JS/CSS文件地方中加入 @Styles.Render("~/Bundles/css"); @Scripts.Render("~/Bundles/js");
重新启动项目发现项目完美运行，并且CSS和JS文件全部加载完成

注意：页面中的@Styles.Render和@Scripts.Render括号中的地址与BundleConfig中的StyleBundle和ScriptBundle中的地址是一一对应的