Member Avatar for 3825

Here is a snippet from my _layout.cshtml file from one of the projects I am involved with...

<link href="@Url.Content("~/Content/themes/ohl/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/ohl/jquery.ui.selectmenu.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/ohl/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/ohl/jquery.checkbox.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/ohl/jquery.safari-checkbox.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/ohl/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/PagedList.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/jquery.multiselect.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.blind.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.bounce.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.clip.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.core.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.drop.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.explode.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.fade.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.fold.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.highlight.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.pulsate.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.scale.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.shake.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.slide.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.effects.transfer.min.js")" type="text/javascript"></script> 
        <script src="@Url.Content("~/Scripts/jquery.ui.accordion.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.autocomplete.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.checkbox.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.dialog.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.draggable.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.droppable.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.mouse.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.position.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.progressbar.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.resizable.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.selectable.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.selectmenu.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.slider.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.sortable.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.tabs.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/BubbleOverlay/flower_bubble.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/BubbleOverlay/pngFix.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.multiselect.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/PagedList/PagedList.Mvc.js")" type="text/javascript"></script>

I am sure I am not the first person to cross this road. I wonder if there is a way to consolidate all these into one file when we go into production? Please advise.

I am using Visual Studio 2010. Please PM me or move the thread yourself if you think this is not the right sub forum.

Sincerely,
Duck

Ref: http://googlecode.blogspot.com/2012/01/lets-make-tcp-faster.html

  • 1 Contributor
  • 1 Reply
  • 250 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by 3825

Dani AI

Generated

For : the long list of separate CSS/JS files in _layout.cshtml is exactly the kind of setup that benefits from bundling and minification before production. Each file adds an HTTP request and, for scripts, a render-blocking cost. A compact approach speeds page load, reduces bandwidth and makes caching simpler while keeping development easy (unminified, separate files) and production fast (combined, minified files).

Recommended, practical steps:

  • Use a bundling/minification step (server-side or build-time) so one or two output files replace many inputs.
  • Create a custom jQuery UI build that contains only the widgets/effects actually used — that collapses dozens of UI files into a single smaller file.
  • Serve common libraries from a CDN with a local fallback to keep caches warm across sites.
  • Move non-critical scripts to the end of the page to avoid blocking initial render, enable gzip compression, and use far-future cache headers with fingerprinting or bundle-versioning for cache-bust on deploy.

Example (generic) bundle pattern to adapt to the project:

// App_Start/BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/site").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/plugins/*.js",
        "~/Scripts/app/*.js"
    ));

    bundles.Add(new StyleBundle("~/Content/css").Include(
        "~/Content/*.css"
    ));
}

// call in Application_Start:
// BundleConfig.RegisterBundles(BundleTable.Bundles);

Then replace individual includes in _Layout.cshtml with the single render calls (Styles.Render / Scripts.Render). Troubleshooting notes: if a plugin breaks after bundling, check load order and duplicate jQuery includes; some minifiers can break legacy JS—try an alternate minifier or exclude problem files from minification. Ensure production bundling is enabled (debug=false or equivalent) and test in staging before deploying.

Member Avatar for 3825

No takers? :(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.