博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
阅读量:5806 次
发布时间:2019-06-18

本文共 3872 字,大约阅读时间需要 12 分钟。

  JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面解析速度。压缩功能实现了对javascript脚本和CSS进行压缩的功能,它能够去除脚本或样式中不必要的空白和注释,同时能够优化脚本变量名的长度

  在ASP.NET MVC 4中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现。

  1. 新建ASP.NET MVC 4空项目,引用System.Web.Optimization

  1>、新建ASP.NET MVC 4空项目:

  2>、引用System.Web.Optimization

  通过NuGet添加对System.Web.Optimization的引用:

  2. ASP.NET MVC 4项目使用System.Web.Optimization

  1>、BundleConfig.cs

  在类文件BundleConfig.cs中配置需要捆绑的JS及CSS文件。

using System.Web;using System.Web.Optimization;namespace MvcExample{    public class BundleConfig    {        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725        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"));        }    }}

  2>、_Layout.cshtml

    
@ViewBag.Title @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) @RenderBody()

  3>、Global.asax

  在中添加代码:

BundleConfig.RegisterBundles(BundleTable.Bundles);
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Http;using System.Web.Mvc;using System.Web.Optimization;using System.Web.Routing;namespace MvcExample{    // Note: For instructions on enabling IIS6 or IIS7 classic mode,     // visit http://go.microsoft.com/?LinkId=9394801    public class MvcApplication : System.Web.HttpApplication    {        protected void Application_Start()        {            AreaRegistration.RegisterAllAreas();            WebApiConfig.Register(GlobalConfiguration.Configuration);            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);            RouteConfig.RegisterRoutes(RouteTable.Routes);            BundleConfig.RegisterBundles(BundleTable.Bundles);        }    }}

  4>、Web.config

  在根目录及Views文件夹下的Web.config中添加命名空间引用:

  3. ASP.NET MVC 4项目JS/CSS打包压缩效果

  1>、查看加载原始JS/CSS效果

  完成上面的项目代码之后,运行查看源文件:

  2>、查看捆绑压缩JS/CSS效果

  修改根目录下Web.config ,将debug设置为false。

  在Firebug中查看css文件压缩后的加载内容,可以看出原始css文件中的注释及空白换行均被删除。

  启用JS/CSS文件压缩合并,除了可以在Web.config中配置,也可以在BundleConfig.cs或Global.asax中添加代码:

BundleTable.EnableOptimizations = true;

  BundleConfig.cs

using System.Web;using System.Web.Optimization;namespace MvcExample{    public class BundleConfig    {        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725        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;        }    }}
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Http;using System.Web.Mvc;using System.Web.Optimization;using System.Web.Routing;namespace MvcExample{    // Note: For instructions on enabling IIS6 or IIS7 classic mode,     // visit http://go.microsoft.com/?LinkId=9394801    public class MvcApplication : System.Web.HttpApplication    {        protected void Application_Start()        {            AreaRegistration.RegisterAllAreas();            WebApiConfig.Register(GlobalConfiguration.Configuration);            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);            RouteConfig.RegisterRoutes(RouteTable.Routes);            BundleConfig.RegisterBundles(BundleTable.Bundles);            BundleTable.EnableOptimizations = true;        }    }}

  4. 参考资料

  

转载于:https://www.cnblogs.com/libingql/p/3486269.html

你可能感兴趣的文章
C# API中的模型和它们的接口设计
查看>>
两面看问题:区块链与伦理人权
查看>>
7道常见的数据分析面试题
查看>>
物联网技术周报第 137 期: 使用 Amazon FreeRTOS 和 ESP32 将设备连接到云端
查看>>
最新的Java SE平台和JDK版本发布计划
查看>>
REST是新SOAP?
查看>>
OpsRamp推出AIOps推理引擎
查看>>
org.jasig.cas.client校验
查看>>
[leetcode]Longest Increasing Subsequence
查看>>
PHP_底层分析
查看>>
js-csp 可以开始尝试了
查看>>
【笔记】Network Evaluation——零碎
查看>>
web 安全入门
查看>>
【腾讯Bugly干货分享】H5 视频直播那些事
查看>>
读取@RequestMapping生成路径列表
查看>>
php处理Excel
查看>>
Erlang/Elixir: 使用 Leex 和 Yecc 解析领域语言(DSL)
查看>>
silm框架初使用
查看>>
Golang transfer file with socket
查看>>
Centos 添加pcntl扩展程序
查看>>