1 创建类 BundleConfig
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
namespace CSM.Web.App_Start
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/lib/jquery/1.9.1/jquery.min.js",
"~/static/h-ui/js/H-ui.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/static/h-ui/css/H-ui.css",
"~/static/h-ui.admin/css/H-ui.admin.css",
"~/static/h-ui.admin/css/H-ui.login.css",
"~/static/h-ui.admin/css/style.css"
//"~/lib/Hui-iconfont/1.0.8/iconfont.css"
));
bundles.Add(new StyleBundle("~/Content1/css").Include(
"~/lib/Hui-iconfont/1.0.8/iconfont.css"
));
}
}
}
2 注册类BundleConfig
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);//注册
BundleTable.EnableOptimizations = true;//开启压缩
}
}
3 页面设置
<html>
<head>
<title>某大型项目</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="某大型项目">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
4
压缩后页面效果，所有的css和js脚本都分别被压缩成一个文件，如下图
image.png
5总结
- 优点
使用 Bundle 可以有效压缩JS脚本和css的大小，减少网站的请求数。降低了客户端的请求时间，给用户带来更好体验。 - 缺点
此技术不适合调试模式，项目完成发布前在使用。
测试中在css压缩合并中出现一些css外引用的图片和字体，加载失败。更换绝对地址后图片显示正常，字体还是报错。这还有待研究。
网友评论