Por que usar @ Scripts.Render (“~ / bundles / jquery”)

217

Como

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

diferem de apenas referenciar o script de html como este

<script src="~/bundles/jquery.js" type="text/javascript"></script>

Existem ganhos de desempenho?

Tom Squires
fonte
Como faço para adicionar type = “text / css” - stackoverflow.com/questions/15662096/…
LCJ 8/13/13

Respostas:

288

Agrupar consiste em compactar vários arquivos JavaScript ou de folhas de estilo sem formatação (também denominada minificada) em um único arquivo para salvar a largura de banda e o número de solicitações para carregar uma página.

Como exemplo, você pode criar seu próprio pacote:

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"))

E renderize assim:

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

Mais uma vantagem @Scripts.Render("~/bundles/mybundle")sobre o nativo <script src="~/bundles/mybundle" />é que @Scripts.Render()respeitará a web.configconfiguração de depuração:

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

Se debug="true"então, ele renderizará tags de script individuais para cada script de origem, sem qualquer minificação.

Para folhas de estilo, você precisará usar um StyleBundle e @ Styles.Render ().

Em vez de carregar cada script ou estilo com uma única solicitação (com tags de script ou link), todos os arquivos são compactados em um único arquivo JavaScript ou de folha de estilo e carregados juntos.

yan.kun
fonte
9
Apenas me perguntando: existe um arquivo armazenado em algum lugar desse pacote ou ele simplesmente existe na memória?
Elliot
15
Está armazenado no cache.
NicoJuicy
4
Também pode ser configurado para usar automaticamente uma CDN e fazer fallback para scripts locais se a CDN estiver indisponível. É bem liso.
Dan Esparza
39
Há um benefício adicional em fazer isso. Ao depurar, o Scripts.Render produzirá cada arquivo desagregado, o que torna o desenvolvimento local muito menos trabalhoso, mas em um ambiente ativo, isso produzirá o resultado empacotado / minificado, o que pode levar a ganhos de desempenho, conforme descrito acima, mas sem alterando qualquer código.
Sethcran
9
No modelo "básico" do MVC4 (Visual Studio), os pacotes configuráveis ​​são preparados em "BundleConfig.cs" (pasta App_Start).
Apolo
51

Você também pode usar:

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

Para especificar o formato da sua saída em um cenário em que você precisa usar Charset, Tipo, etc.

Termato
fonte
3
Também é muito útil para carregar módulos requirejs
Phil
13
... ou para adicionar o asyncatributo.
Christoph Fink
7
@Scripts.RenderFormat("<script type=\"text/javascript\" async src=\"{0}\"></script>", "~/bundles/mybundle")
Robert McKee
1
... ou para adicionar o crossorigin = atributo "anonymous"
Alexandre Swioklo