为什么要使用@ Scripts.Render(“〜/ bundles / jquery”)


Answers:


288

捆绑是指将多个JavaScript或样式表文件压缩而不进行任何格式化(也称为最小化)到单个文件中,以节省带宽和加载页面的请求数。

例如,您可以创建自己的捆绑包:

bundles.Add(New ScriptBundle("~/bundles/mybundle").Include(
            "~/Resources/Core/Javascripts/jquery-1.7.1.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-1.8.16.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.min.js",
            "~/Resources/Core/Javascripts/jquery.validate.unobtrusive.min.js",
            "~/Resources/Core/Javascripts/jquery.unobtrusive-ajax.min.js",
            "~/Resources/Core/Javascripts/jquery-ui-timepicker-addon.js"))

并像这样渲染它:

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

@Scripts.Render("~/bundles/mybundle")与本机相比,另一项优势<script src="~/bundles/mybundle" />@Scripts.Render()将遵循web.config调试设置:

  <system.web>
    <compilation debug="true|false" />

如果这样的debug="true"话,它将为每个源脚本呈现单独的脚本标签,而无需进行任何缩小。

对于样式表,您将必须使用StyleBundle和@ Styles.Render()。

无需通过单个请求(使用脚本或链接标签)加载每个脚本或样式,而是将所有文件压缩到单个JavaScript或样式表文件中并一起加载。


9
只是想知道:是否有文件存储在该捆绑软件的某个位置,或者它仅存在于内存中?
Elliot

15
它存储在缓存中。
NicoJuicy

4
如果CDN不可用,也可以将其设置为自动使用CDN并回退到本地脚本。非常漂亮。
丹·埃斯帕萨

39
这样做还有其他好处。调试时,Scripts.Render将输出未捆绑的每个文件,这使本地开发的麻烦减轻了很多,但是在实际环境中,这将输出捆绑/最小化的结果,这可以导致如上所述的性能提升,但是却没有更改任何代码。
Sethcran

9
在MVC4(Visual Studio)的“基本”模板中,在“ BundleConfig.cs”(App_Start文件夹)中准备了捆绑包。
Apolo

51

您还可以使用:

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

在需要使用字符集,类型等的情况下指定输出格式。


3
对于加载requirejs模块也非常有用
Phil,

13
...或添加async属性。
Christoph Fink 2014年

7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
罗伯特·麦基

1
...或添加crossorigin =“ anonymous”属性
Alexandre Swioklo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.