zoukankan      html  css  js  c++  java
  • mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下:

    nuget包管理--程序包管理控制台--Install-Package Microsoft.AspNet.Web.Optimization

    1.App_Start添加BundleConfig.cs文件,当然你可以把如下直接写在Globle.aspx的Application_Start中

    public class BundleConfig
        {
            public static void RegisterBundles(BundleCollection bundles)
            {
                //1.添加js
                bundles.Add(new ScriptBundle("~/jsLayout")
                    .Include("~/...js")
                    .Include("~/...js"));
                //2.添加css
                bundles.Add(new StyleBundle("~/cssLayout")
                    .Include("~/...css")
                    .Include("~/...css"));
    
                //3.启动css,js压缩
                BundleTable.EnableOptimizations = true;
            }
        }

    2.Globle.aspx的Application_Start引用

    BundleConfig.RegisterBundles(BundleTable.Bundles);

    3.修改View下的web.config中razor引擎配置,添加项System.Web.Optimization

    <system.web.webPages.razor>
        <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
            <add namespace="System.Web.Mvc" />
            <add namespace="System.Web.Mvc.Ajax" />
            <add namespace="System.Web.Mvc.Html" />
            <add namespace="System.Web.Routing" />
            <add namespace="System.Web.Optimization" />
            <add namespace="FMMV.Web" />
          </namespaces>
        </pages>
      </system.web.webPages.razor>

    4.前台引用,我是在_Layout.chtml中引用,如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta content="width=device-width" name="viewport">
        <title>@ViewBag.Title</title>
         @* 样式 *@
        @Styles.Render("~/cssLayout");
        @RenderSection("headResources", required: false)
    </head>
    <body>
        @RenderBody()
        @* 脚本*@
        @Scripts.Render("~/jsLayout");
        @RenderSection("footerResources", required: false)
    </body>
    </html>

    5.个人页面调用Layout,比如Index.cshtml

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <!--本页面dom-->
    <div>
       
    </div>
    
    <!--个人脚本放置位置-->
    @section footerResources {
       //只有本页面用到的js文件
       <script src="~/xxx.js"></script>
       //自定义js
        <script>
            $(function () {
                
            });
    
        </script>
    }
  • 相关阅读:
    Hackers' Crackdown UVA
    Sequence II HDU
    To the moon HDU
    Dynamic Rankings ZOJ
    google vimium插件的一些简单命令
    关于datatable转换datatime类型的问题
    服务器无法播放flv格式的视频解决办法
    DTCMS 新建下拉列表控件
    ajax 返回数据 无法得到其属性的解决办法
    关于IIS中WEB网站访问弹“验证输入框”及“401限制访问”的解决办法
  • 原文地址:https://www.cnblogs.com/lcawen/p/6702905.html
Copyright © 2011-2022 走看看