1

I am including a big javascript application into our MVC-based solution. However, the application includes a lot of files due to which I would like to enable bundling and minification on it. In fact, I would like to enable bundling on all 3rd party javascript and CSS files while keeping the files we develop ourselves unminified and unbundled. Until release, of course.

There is way to enable optimizations globally:

public static void RegisterBundles(BundleCollection bundles)
{
    Bundle ckScripts = new ScriptBundle("~/scripts/ckeditor")
        .IncludeDirectory("~/Areas/CMS/Editor", "*.js", true);
    bundles.Add(ckScripts);
    BundleTable.EnableOptimizations = true;
}

However, this happens in the top BundleTable level enabling optimizations on all the bundles within the bundle table.

I would need to have something like this:

public static void RegisterBundles(BundleCollection bundles)
{
    Bundle ckScripts = new ScriptBundle("~/scripts/ckeditor")
        .IncludeDirectory("~/Areas/CMS/Editor", "*.js", true)
        .EnableOptimizations();
    bundles.Add(ckScripts);
}

Which would effectively enable optimizations only for that particular bundle.

I know, there is currently no Bundle.EnableOptimizations() method and creating such given the fact that the optimization happens in the BundleTable level, which is inherently global by design, creating such method, would prove very difficult.

So, here I in loss of ideas where to look into.

Questions:

  1. Is there an alternative framework somewhere that would support this
  2. Is there a contrib project somewhere that would provide this
  3. Have you encountered such need, possibly have a solution
  4. Provided that there's no existing solution, please post an idea how to start unfolding this challenge.

From what I know, BundleTable is a singleton. Which means there can be only one instance. I had an idea of creating another bundle table but got lost when I started figuring out how to make MVC use it.

Another starting point would be to code a custom renderer. One that mimics the behavior of System.Web.Optimization.Scripts.Render(), but again, I'm getting lost with it trying to figure out in which state the BundleTable comes into picture.


UPDATE


Seems like I can create a new BundleContext and BundleResponse by using a HtmlHelper.

public static IHtmlString RenderBundled<TSource>(this HtmlHelper<TSource> helper, string bundlePath)
{
    // Find the bundle in question
    var bundle = BundleTable.Bundles.FirstOrDefault(b => b.Path == bundlePath);

    // No bundle found, return
    if (bundle == null) return MvcHtmlString.Create(String.Empty);

    // Add the bundle found into a new collection
    BundleCollection coll = new BundleCollection {bundle};

    // Create a new BundleContext
    BundleContext ctx = new BundleContext(helper.ViewContext.HttpContext, coll, "~/bundles");

    // Enable optimizations
    ctx.EnableOptimizations = true;

    // Create the response (this contains bundled & minified script/styles from bundle)
    BundleResponse response = bundle.GenerateBundleResponse(ctx);

    // Render the content based on ContentType
    if (response.ContentType == "text/css")
        return RenderStyle(response.Content);// returns <style>bundled content</style>

    if (response.ContentType == "text/javascript")
        return RenderScript(response.Content); // returns <script>bundled content</script>

    // In any other case return "nothing"
    return MvcHtmlString.Create(String.Empty);
}

This probably is not the best approach. Overhead from creating BundleContext on every page request and adding the script/styles payload into the page output without the caching abilities. But it's a start. One thing I noticed was that the bundled content will actually be cached in HttpContext.Cache. So, theoretically I could just put the bundle path into script src or style href and somehow then handle the request from server side.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.