34

Does anyone have any experience with or know any good solutions for bundling and minifying modular JavaScript like RequireJS / AMD in an ASP.NET MVC project?

Is the best way to use the RequireJS optimizer (perhaps in a post build action?) -- or is there something better out there for ASP.NET MVC?

kendaleiv
  • 5,793
  • 3
  • 28
  • 38
  • Since the AMD approach relies heavily on scripts loading other scripts, I believe your best bet is to either minify each script independently (without bundling) or, indeed, use the RequireJS optimizer which tries to detect module inclusions and bundle accordingly. – Avish Jul 20 '12 at 21:08

3 Answers3

13

I think the problem you'll hit is if you used anonymous defines. If you want a combined/bundled script file that contains all your defines, you'll have to name them.

eg.

define("someModule", ["jquery", "ko"], function($,ko) { ... });

instead of

define(["jquery", "ko"], function($,ko) { ... });

If you use the file names as the module names, you'll be able to load them asynchronously (not bundled) as well as preloaded (bundled). That way you can work in debug mode as well as release mode without having to change your requires.

I have no experience with the RequireJS optimizer to know if it takes care of anonymous defines or not.

UPDATE:

I recently had to do this and one of the problems I ran into was the data-main attribute of the script tag loading require.js. Since the main.js file had dependencies on the bundled modules, they need to be loaded before main.js but after require.js. So I had to ditch data-main and load that file (unbundled) last.

from

<script src="../JS/require-v2.1.2.js" type="text/javascript" data-main="main.js"></script>

to

<script src="../JS/require-v2.1.2.js" type="text/javascript"></script>
<%: System.Web.Optimization.Scripts.Render("~/bundles/signup") %>
<script src="main.js" type="text/javascript"></script>

I haven't looked, but if the bundle configuration could ensure main.js is last, then wouldn't even need that last script tag.

Jeff Shepler
  • 2,007
  • 2
  • 22
  • 22
  • You can get those three lines down to one by using `BundleConfig.cs`, see my answer below. I think BundleTables are new in MVC 4. – zacharydl Mar 22 '14 at 00:57
2

These are the steps to get RequireJS bundled with main.js. You can get down to one line in the <head> tag. This does not address the issue with anonymous defines.

HTML

<head runat="server">
    <title></title>
    <%: System.Web.Optimization.Scripts.Render("~/bundles/scripts") %>
</head>

BundleConfig.cs

using System.Web;
using System.Web.Optimization;

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
                    "~/scripts/libs/require.js",
                    "~/scripts/main.js"));
   }
}

main.js must work without data-main (I needed to set baseUrl)

require.config({
    baseUrl: "scripts"
});
Community
  • 1
  • 1
zacharydl
  • 4,278
  • 1
  • 29
  • 23
  • Except that you're not bundling anything else than the main.js and the require.js, so any other dependency will be loaded the same way than before: file by file. It's not effective, you won't notice a difference in a real world scenario where you have many dependencies (you're only saving 1 file load). – Micaël Félix May 20 '15 at 14:39
  • In my scenario, this speeds up the initial load by just a bit. Since it's a single-page-application, I actually want RequireJS to load everything else later, one at a time. – zacharydl May 26 '15 at 20:03
  • @myka eyl -- you might be right in the narrow scope of Zach's example. But what he demonstrates, beautifully I might add, is how you wire up require with one or many of your bundles specified in the bundle config. In most cases I've encountered I'll create a bundle for my external libs (jquery, knockout etc) and reference those in production through require. I will post an example below. – pim Sep 17 '16 at 19:42
0

I'm not sure if this is an acceptable solution or not, but Visual Studio 2012 has a NuGet package (Microsoft.Web.Optimization) which supports native minification and bundling. I'm not sure if it's available for 2010

It's one line of code in application_start

Microsoft.Web.Optimization.BundleTable.Bundles.EnableDefaultBundles();

http://msdn.microsoft.com/en-us/vs11trainingcourse_aspnetandvisualstudio_topic5

McKay
  • 12,334
  • 7
  • 53
  • 76
  • 1
    That B/M link is obsolete. See my B/M tutorial http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification – RickAndMSFT Jul 22 '12 at 19:52