Asp.net(C#) MVC4自带的JS、CSS优化功能

最新推荐文章于 2021-08-03 22:27:05 发布

长江

最新推荐文章于 2021-08-03 22:27:05 发布

阅读量1w

点赞数

分类专栏： C#WEB

本文链接：https://blog.csdn.net/lonestar555/article/details/18359925

版权

C#WEB 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

功能复杂、界面漂亮的网站常常会遇到JS、CSS文件过大，导致网站访问速度变慢，本章正是针对此问题进行优化。

本章所说的JS、CSS优化功能：

一、缓存：首次访问站点，JS和CSS文件会下载到浏览器缓存中，之后的再次访问站点时，不再从服务器下载JS CSS文件，而是从浏览器缓存中读取；除非JS CSS文件有更新改动，则在访问时自动更新浏览器缓存中的JS CSS文件。

二、优化压缩：自动将JS CSS文件优化压缩，也就是去掉文件中的不必要的注释空格换行等等，然后才将优化压缩的文件传到客户端。

使用步骤：

此功能会用到MVC4 的System.Web.Optimization组件，

若是旧项目转换过来则需手工添加引用C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 4\Packages\Microsoft.AspNet.Web.Optimization.1.0.0\lib\net40\System.Web.Optimization.dll

若是VS2010新建MVC4项目则会自动引用System.Web.Optimization.dll组件，并在/App_Start目录下生成一个BundleConfig.cs：

    public class BundleConfig
    {
        // 有关 Bundling 的详细信息，请访问 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 ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.9.1.min.js"));

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            bundles.Add(new ScriptBundle("~/bundles/jscommon").Include(
                        "~/Scripts/JSCommon.js")); 

            // 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
            // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

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

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }

上边这段代码作用是向Bundle对象集合中注册CSS JS文件，可以注册单个文件，也可以注册多个文件。

接着在视图页面或母板页中需要哪个文件则引用相对的虚拟路径：

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
    <link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <%: Styles.Render("~/Content/css") %>
    <%: Scripts.Render("~/bundles/jquery") %>
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/bundles/jscommon")%>
</head>

然后在Global.asax中加上一句代码开启优化功能：BundleTable.EnableOptimizations = true;

    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);
            AuthConfig.RegisterAuth();
            BundleTable.EnableOptimizations = true;//是否启用优化 
        }
    }

运行项目，使用GOOGLE浏览器就能很方便的看到jquery、jscommon、css文件的网络下载Size从一开始的流量变成(from cache)，status也会变成304Not Modified，当文件有更新时则自动更新浏览器缓存。

点击这些CSS JS文件就会发现已经被压缩优化。

更新（20140127）：

我错了，不是这样的。此章课题有待深入研究，高手请飘过！

长江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Asp.net(C#) MVC4自带的JS、CSS优化功能

本章所说的JS、CSS优化功能：一、缓存：首次访问站点，JS和CSS文件会下载到浏览器缓存中，之后的再次访问站点时，不再从服务器下载JS CSS文件，而是从浏览器缓存中读取；除非JS CSS文件有更新改动，则在访问时自动更新浏览器缓存中的JS CSS文件。二、优化压缩：JS CSS文件自动优化压缩后传到客户端。使用步骤：此功能会用到MVC4 的System.Web.Optimiza
复制链接

扫一扫

专栏目录