ASP.NET MVC用Bundles压缩js文件,并让浏览器异步加载js

来源:互联网 发布:淘宝优惠卷群怎么代理 编辑:程序博客网 时间:2024/06/05 03:25


mvc默认的写法js引用(会自动压缩js文件):

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

Scripts.Render是asp.net mvc自身采用比较优化的压缩技术和缓存技术,将多个js压缩优化并且整合为1个体积较小的js,但对于外部使用来说,功能是不会出现任何区别的,从而提高了页面体验。而压缩和缓存的过程都是通过框架自动实现的,浏览器第二次访问时就会从缓存中读取

这种@Scripts.Render("~/freightAdd")写法是会根据webconfig设置的

<system.web>
    <compilation debug="true" targetFramework="4.5.2"/>

debug的值而生成是否压缩的js文件,true不会生成压缩的,false会生成压缩的,如果在Global.asax里面

BundleTable.EnableOptimizations = false; //开发调试时一般不开启,是否启用压缩

这里的false不会压缩,true会压缩,前提是页面必须这样写@Scripts.Render("~/freightAdd")


<script src="@Scripts.Url("~/freightAdd")" async defer></script>

<script src="@BundleTable.Bundles.ResolveBundleUrl("~/freightAdd",false)"  async defer></script>

这样的两种写法都不会因为设置是否压缩而改变,最后都是生成压缩的js,就是设置是否压缩对这两行引用无效


推荐写法:

@Scripts.RenderFormat("<script type=\"text/javascript\" src =\"{0}\"></script >", "~/freightAdd")

@Scripts.RenderFormat("<script type=\"text/javascript\" src =\"{0}\" async defer></script >", "~/freightAdd")


还有其他写法(效果和上面的一样的):

<script src="@BundleTable.Bundles.ResolveBundleUrl("~/bundles/mybundle",false)"async defer></script>

这里的false表示不会生成后缀字符串(问号后面的),async defer表示在整个document解析完成是异步执行此js,可以提高渲染速度,此js被解析后生成的js引用如下:

<script src="/freightAdd" async defer></script>


还有种写法:

<script src="@Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/mybundle")" type="text/javascript"></script>


原创粉丝点击