Next I tried to separate the code into multiple script files that were more logically organized. Unfortunately this led me to even more issues:
- How could I separate out different layers of the application and make sure that these layers could communicate effectively?
- Why were these files so difficult to test?
I was really struggling with this design issue until I discovered AMD and began using Require.js.
What is Require.js?
Why should I use a module loader like Require.js?
Bundling and minifying with Require.js
ASP.NET MVC provides some really good out-of-the-box bundling and minification features. These work very well and also include built-in cache busting capability through the use of tokens based on file changes. However, remember that Require.js dynamically loads your module dependencies from the client via the AMD API. Require.js has its own server side optimization script named r.js.
Thanks for the article. I’ve been looking to see if you can use MVC’s bundling/minification and require.js. Looks like using the r.js in our build process might be the way to go. You said ” I plan to cover the details of an MVC based solution for cache busting in a future blog post.” Any plans on writing that article :-). I’m interested in what you have to say about it. Thanks!
Hi Kevin. I am still planning to blog about it and will try to get it posted soon. I have it working in one of my applications.
Wondering if you ever got around to writing that blog post? Would love to see how your solution compares to what we ended up doing.
I am also interested in how your MVC based solution turned out. I’ve been using grunt with config based on this example: https://github.com/asciidisco/grunt-requirejs/tree/master/examples/multipage
It enables you to create a bundle per page in your build process. Its a bit cumbersome to handle this in the build process instead of in the development process (like MVC bundles).
Its also important that you get non minified versions of your script when you are developing.