ASP.NET MVC4之js css文件合并功能(3)

下面是对ASP.NET MVC4之js css文件合并功能(3)的完整攻略：

什么是js css文件合并功能

js css文件合并功能是指将多个js或css文件合并为一个文件，从而减少页面请求的次数和请求文件的大小，以提高页面加载速度。

实现步骤

第一步：配置BundleTable

在全局文件 Global.asax 中，使用 BundleTable 类中的 EnableOptimizations 属性将压缩和合并功能开启，并在 Application_Start() 方法中增加需要合并的 js 和 css 文件。

示例代码如下：

using System.Web.Optimization;

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        BundleTable.EnableOptimizations = true;

        var myjsbundle = new ScriptBundle("~/bundles/myjs");
        myjsbundle.Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js");

        var mycssbundle = new StyleBundle("~/Content/mycss");
        mycssbundle.Include(
            "~/Content/bootstrap.css",
            "~/Content/site.css");

        BundleTable.Bundles.Add(myjsbundle);
        BundleTable.Bundles.Add(mycssbundle);
    }
}

第二步：在 View 中使用合并后的文件

使用 Url.Content() 方法来生成合并后的 js 和 css 文件的路径，并且将它们分别赋值给相应的 script 标签或 link 标签中的 href 属性，实现使用合并后的文件。

示例代码如下：

<head>
    ...
    @Scripts.Render(Url.Content("~/bundles/myjs"))
    @Styles.Render(Url.Content("~/Content/mycss"))
</head>

第三步：编译发布

最后，编译并发布你的项目，让所有的 js 和 css 文件都以合并后的形式引用到项目中。

示例说明

假设你有以下三个 js 文件：

<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<script src="js/script3.js"></script>

还有以下两个 css 文件：

<link href="css/style1.css" rel="stylesheet">
<link href="css/style2.css" rel="stylesheet">

你可以通过 BundleTable 配置将这些文件合并为一个 js 文件和一个 css 文件，代码如下：

var myjsbundle = new ScriptBundle("~/bundles/myjs");
myjsbundle.Include(
    "~/Scripts/script1.js",
    "~/Scripts/script2.js",
    "~/Scripts/script3.js");

var mycssbundle = new StyleBundle("~/Content/mycss");
mycssbundle.Include(
    "~/Content/style1.css",
    "~/Content/style2.css");

BundleTable.Bundles.Add(myjsbundle);
BundleTable.Bundles.Add(mycssbundle);

在 View 文件中，你可以使用以下方式来引用合并后的文件：

<head>
    ...
    @Scripts.Render(Url.Content("~/bundles/myjs"))
    @Styles.Render(Url.Content("~/Content/mycss"))
</head>

这样就可以将以上的多个 js、css 文件合并为一个文件，大大提高了页面的加载速度。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET MVC4之js css文件合并功能(3) - Python技术站