• 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>
    }
  • 相关阅读:
    MinIO:入门
    JS中面向对象的多种继承方式
    点击按钮实现图片下载
    给大家推荐一个免费的云平台-阿贝云
    REPLACE
    SUBSTRING_REGEXPR 截取字符串
    基本的git/linux/g++/ 等指令
    C++引用和指针&, *
    go语言异常处理 error panic recover defer
    django.db.utils.IntegrityError: (1048, "Column 'id' cannot be null")
  • 原文地址:https://www.cnblogs.com/lcawen/p/6702905.html
Copyright © 2020-2023  润新知