Asp.net MVC下使用Bundle合并、压缩js与css文件详解

Asp.net MVC是一个使用Model-View-Controller（MVC）架构模式开发Web应用程序的框架。在Asp.net MVC中，可以使用Bundle来合并、压缩Javascript (JS) 和Cascading Style Sheets (CSS) 文件以提高Web应用程序的性能。下面是使用Bundle合并和压缩JS和CSS文件的完整攻略：

1. 创建Bundle

在Asp.net MVC中，可以在BundleConfig.cs文件中创建Bundle。在BundleConfig.cs文件中，可以指定需要包含哪些JS和CSS文件，并为这些文件创建一个Bundle。以下代码是在BundleConfig.cs中创建Bundle的示例：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

在上面的代码中，ScriptBundle类和StyleBundle类用于分别创建JS和CSS的Bundle。~表示根目录，jquery和css表示Bundle的名称。Include()方法是用来指定需要包含哪些JS或CSS文件的。

2. 注册Bundle

创建好Bundle后，需要在Application_Start()方法中注册它们。以下代码是在Application_Start()方法中注册Bundle的示例：

protected void Application_Start()
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

在上面的代码中，RegisterBundles(BundleTable.Bundles)方法用于注册Bundle。

3. 在View中引用Bundle

在创建好Bundle并注册后，可以在View中引用它们。以下是在View中使用Bundle引用JS和CSS文件的示例：

@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/css")

在上面的代码中，Scripts.Render()和Styles.Render()方法用于将JS和CSS文件引用到HTML页面中，~/bundles/jquery和~/Content/css表示Bundle的名称。

4. 生成压缩文件

默认情况下，Asp.net MVC不会对Bundle中的文件进行压缩。要生成压缩文件，需要使用ASP.NET Web Optimization Framework。以下是使用ASP.NET Web Optimization Framework生成压缩文件的示例：

安装ASP.NET Web Optimization Framework

可以使用NuGet包管理器安装ASP.NET Web Optimization Framework。打开Visual Studio，依次点击“工具” -> “NuGet包管理器” -> “程序包管理器控制台”，然后在控制台中输入以下命令来安装ASP.NET Web Optimization Framework：

Install-Package Microsoft.AspNet.Web.Optimization

压缩文件

在完成安装之后，需要在BundleConfig.cs文件中启用压缩。以下是启用压缩的示例：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

    BundleTable.EnableOptimizations = true;
}

在上面的代码中，EnableOptimizations属性用于启用压缩。

示例

示例1

下面是一个使用Bundle合并和压缩JS和CSS文件的示例：

在Visual Studio中创建一个新的Asp.net MVC应用程序。
在Solution Explorer中，打开BundleConfig.cs文件，然后在其中添加以下代码：

```csharp
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
```

在Layout.cshtml最后添加以下代码即可：

html @{ BundleTable.EnableOptimizations = true; } @Scripts.Render("~/bundles/jquery") @Styles.Render("~/Content/css")

示例2

以下是另一个使用Bundle合并和压缩JS和CSS文件的示例：

在Visual Studio中创建一个新的Asp.net MVC应用程序。
在Solution Explorer中，打开BundleConfig.cs文件，然后在其中添加以下代码：

```csharp
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/style.css"));
```

在_Layout.cshtml文件中添加以下代码：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</head>

可以看到，CollectionView中定义了多个bundler，分别用来管理不同的JS和CSS文件。在bootsrap3.css文件中，我们可以看到文件嵌套结构比较深，在引入时，我们可以使用“~/Content/bootstrap/bootstrap3.css”以简化代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Asp.net MVC下使用Bundle合并、压缩js与css文件详解 - Python技术站