ASP.NET MVC Bundle not rendering script files on staging server. It works on development server

by

Based on your comments, we need to go over how the Bundling mechanism works in MVC.

Edit: Based on the comment below by VSDev, you need to ensure WebGrease is installed into your project. NuGet would be the easiest was to install this package.

When you set a bundle configuration (Example not from above to illustrate)

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js"));

You then, in your views, call something like @Scripts.Render("~/bundles/mainJs"). When your web.config is set into a debug compilation OR you explicitly turn off bundling using the following line in your BundleConfig.cs file

BundleTable.EnableOptimizations = false;

Then, in your view, you will see the following rendered out

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

These are the individual items that made up our bundle, uncompressed and listed individually. The reason these list out individually in debug mode is so that you can debug your scripts and see them as you wrote them (actual variable names, etc).

Now, when we are not in a debug compilation and have not turned off the EnableOptimizations feature, MVC will combine those files in our bundles, compress (minify) them and output only a single script tag.

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

Notice that the source is the same as the name of the bundle from the bundle configurations. Also, the number after the ?v= will change anytime you change a file in that bundle. This is to help prevent caching of old js and css files by the client browsers.

Your scripts are still there and being outputted, but they are being compressed and combined into a single file called /bundles/mainJs. This feature is present to

A) compress the files and reduce information being transmitted and,

B) reduce the number of calls to a website to retrieve the necessary content to render the page.

Nothing is missing, it sounds like everything is working as intended. In a production site, the minification makes these files almost impossible to read, thus why the minification does not take affect while debugging.

As to why the jQuery UI is still being a single JS file, ensure someone didn’t hard code that into your layout view. As for the JS errors, it could be errors that are present on your development box or perhaps something did not compress correctly (however, in all of my MVC development, I have not seen a JS error because of bad minification).

More Related Contents:

  1. jquery messagebox get from button click mvc4
  2. How to pass json POST data to Web API method as an object?
  3. How do I make JS know about the application root?
  4. Convert CSV data into JSON format using Javascript
  5. Razor MVC Populating Javascript array with Model Array
  6. jQuery POST, Error 405 Method not allowed
  7. jQuery: How to traverse / Iterate over a list of object
  8. Pass a javascript variable as parameter to @url.Action()
  9. ASP.NET MVC Partial view ajax post?
  10. Make a number a percentage
  11. Javascript heredoc
  12. React-Native assembleRelease fails for task ‘:app:bundleReleaseJsAndAssets’
  13. Rotate a div using javascript
  14. Async-loaded scripts with DOMContentLoaded or load event handlers not being called?
  15. How to use Lodash to merge two collections based on a key?
  16. What is the most efficient way to copy some properties from an object in JavaScript?
  17. React Warning: flattenChildren(…): Encountered two children with the same key
  18. Creating array of length n with random numbers in JavaScript
  19. AngularJS – Show byte array content as image
  20. Check if two integers have the same sign
  21. How to create a method in object literal notation?
  22. Navigate through list using arrow keys? (JavaScript/JQ)
  23. Multiple rows with jcarousel
  24. Wildcard string comparison in Javascript
  25. HTML prevent space bar from scrolling page
  26. ES6 export default with multiple functions referring to each other
  27. How to get JSON object from Razor Model object in javascript
  28. How to structure a express.js application?
  29. JavaScript fetch API – Why does response.json() return a promise object (instead of JSON)? [duplicate]
  30. loading an image on web browser using Promise()

Leave a Comment