B\S备忘录29——MVC3下的JS、CSS合并

最新推荐文章于 2024-03-27 22:57:21 发布

Rephilo

最新推荐文章于 2024-03-27 22:57:21 发布

阅读量865

点赞数

分类专栏： BS

本文链接：https://blog.csdn.net/u010092167/article/details/48582561

版权

BS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

既然干过优化的事情，那估计就要一条道干到黑了。

这次主要是对前台页面的优化，浏览器在向服务器发送请求的时候，请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求，去除文件中的一些注释，空白，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。

有些JS比如Jquery-easiui，一般下载下来之后会有两个文件，一个是jquery-easiui.js，一个是jquery-easiui.min.js，这个带着min的js就是经过了合并后的js文件。在使用方面，不带min的js是在项目开发的时候进行调试用的，带min的js是我们的网站调试完成了，发布时候引用，这样就会提高页面打开速度。

再说回来这个BundleConfig。

这个是MVC4中的新增功能，但是我们开发的时候还是用的MVC3，怎么使用呢？

首先添加System.Web.Optimization，WebGrease这两个引用，没有的话只能去MVC4的项目中引了- -。

然后我们自己写一个类BundleConfig

using System.Web;
using System.Web.Optimization;

namespace BundleConfig
{
    public class BundleConfig
    {
        // 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Content/Scripts ").Include(
                        "~/Scripts/jquery-{version}.js"));

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

BundleTable.EnableOptimizations = true;
        }
    }
}<span style="font-family: KaiTi_GB2312; background-color: rgb(255, 255, 255);"> </span>

bundles.Add(newScriptBundle("~/Content/Scripts ").Include(

"~/Scripts/jquery-{version}.js"));

这句话是用来拼接JS的，将.Include()中的路径改为自己的页面使用的JS路径。多个JS路径之间用逗号隔开。例如：

bundles.Add(new ScriptBundle("~/Content/Scripts").Include(
                        "~/Content/jquery-easyui-1.3.2/jquery.easyui.min.js",
                        "~/Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js",
                        "~/Content/jquery.balloon.js",
                        "~/Scripts/EasyuiLayout.js",
                        "~/Scripts/Logout.js"));

CSS也是同理的，例如这样：

bundles.Add(new StyleBundle("~/Content/demo").Include(
                "~/Content/jquery-easyui-1.3.2/demo/demo.css",
                "~/Content/jquery-easyui-1.3.2/themes/default/easyui.css",
                "~/Content/jquery-easyui-1.3.2/themes/icon.css"));

然后，我们在Global.asax.cs， Application_Start这个方法中，加两句话。

 protected void Application_Start()
 {
     BundleTable.EnableOptimizations = true;<span style="white-space:pre">	</span>//这一句，设置合并为可用
     AreaRegistration.RegisterAllAreas();

     // 默认情况下对 Entity Framework 使用 LocalDB
     Database.DefaultConnectionFactory = new SqlConnectionFactory(@"Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");

     RegisterGlobalFilters(GlobalFilters.Filters);
     RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);<span style="white-space:pre">		</span>//和这一句，注册合并的类
            
}

这样我们就可以在页面调用这个合并的方法了。

<head>
    <meta charset="UTF-8">
    <title>ITOO</title>
    @System.Web.Optimization.Styles.Render("~/Content/demo")
    @System.Web.Optimization.Scripts.Render("~/Content/Scripts")
</head>

貌似我们的JS和CSS不多的情况下，这个东西还是没多大的作用的- -。

以上

Rephilo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
24
评论
B\S备忘录29——MVC3下的JS、CSS合并

既然干过优化的事情，那估计就要一条道干到黑了。这次主要是对前台页面的优化，浏览器在向服务器发送请求的时候，请求的文件连接数量是有限制的。使用BundleConfig可以将多个文件请求和并成一个请求，去除文件中的一些注释，空白，压缩文件的大小，自动合并压缩优化代码，缩短响应时间，提高网页速度，起到优化网站的作用。有些JS比如Jquery-easiui，一般下载下来之后会有两个文件，一
复制链接

扫一扫

专栏目录