关于ASP.NET MVC的js和css资源管理

2022-06-16 02:03:02

本文来源于博客园，转载请注明出处

浏览器针对一个域名，最多只会开启6个线程来加载文件，比如head中如果有7个引入文件（js文件或者css文件）的标签，则最后一个文件的网络请求只能排队，直到前6个加载完毕
显然，通过CDN的方式，我们可以避开这个限制，因为CDN的域名跟我们站点的域名是不一样的（当然，除非你自建CDN）
使用bundling和minification的好处1：将多个js或css文件合并成一个，减少网络加载
使用bundling和minification的好处2：可以通过通配符的方式让一些js库（比如jquery这种频繁更新的库）配置更灵活，以方便将来的升级，避免了一处更改，处处更改
配合使用Section、RenderSection和Styles.Render、Scripts.Render，我们可以在layout中将通用的资源文件用Styles.Render、Scripts.Render引入，而特定页面才有的使用RenderSection按需引入，在实际使用中可以不用Section，

在layout布局页面中引入全局的js和css，在碎片页面中引入自己的js和css就行了，无非是页面没那么规则，js和css的引入会出现在div中，而不是在head中
注意一点：bundles.Add时的虚拟路径写法，对css来说，必须以"_{/Content"开始，后面的bootstrapMarkdownCss可以自己随意命名，对js来说，则必须以"}/bundles"开始，这只是区分了两种不同的资源类型，跟路径什么的没有一点关系没有，而且js和css资源的名称可以一样：

 //blog 添加和编辑页面的js

 bundles.Add(new ScriptBundle("~/bundles/mdEdit").Include(

                "~/Content/bootstrap-markdown/js/bootstrap-markdown.js",

                "~/Content/bootstrap-markdown/locale/bootstrap-markdown.zh.js",

                "~/Scripts/showdown.min.js",

                "~/bundles/showdownjs",

                "~/Content/highlight/highlight.pack.js",

                "~/Scripts/my.js"));

 //blog 添加和编辑页面的css

 bundles.Add(new StyleBundle("~/Content/mdEdit").Include(

                "~/Content/bootstrap-markdown/css/bootstrap-markdown.min.css",

                "~/Content/highlight/styles/agate.css"));

bootstrapMarkdownCss是自己定义的名字，但它前边必须是一个有效的目录，js的虚拟路径

我们还可以结合CDN的方式来使用，而不是使用本地文件

public static void RegisterBundles(BundleCollection bundles)

{

    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

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

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the CDN

    var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

    bundles.Add(new ScriptBundle("~/bundles/jquery",

                jqueryCdnPath).Include(

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

    // Code removed for clarity.

}

为了让程序更加健壮，我们还要考虑CDN请求失败的情况，这可以在客户端处理

</footer>

        @Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">

            if (typeof jQuery == 'undefined') {

                var e = document.createElement('script');

                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';

                e.type = 'text/javascript';

                document.getElementsByTagName("head")[0].appendChild(e);

            }

        </script> 

        @RenderSection("scripts", required: false)

    </body>

</html>

本文来源于博客园，转载请注明出处

码农公寓

相关文章