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


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.


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.


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.