4

I am working on a small mvc project, i have declared a bundle in BundleConfig.cs like this

//javascript bundle

bundles.Add(new ScriptBundle("~/bundles/Layout1JS").Include(
                        "~/Content/Public/js/jquery.min.js",
                        "~/Content/Public/js/bootstrap.min.js",
                        "~/Content/Public/js/jquery.isotope.min.js",
                        "~/Content/Public/js/jquery.Photo.js",
                        "~/Content/Public/js/easing.js",
                        "~/Content/Public/js/jquery.lazyload.js",
                        "~/Content/Public/js/jquery.ui.totop.js",
                        "~/Content/Public/js/nav.js",
                        "~/Content/Public/js/sender.js",
                        "~/Content/Public/js/jquery.slider-min.js",
                        "~/Content/Public/js/custom.js"));


//css bundle
bundles.Add(new StyleBundle("~/Content/Public/css").Include(
                        "~/Content/Public/css/main.css"));

In my _Layout.cshml in the head section i have entered:

<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- LOAD CSS FILES -->
    @Styles.Render("~/Content/Public/css", "~/Content/css")

    <!-- LOAD JS FILES -->


    @Scripts.Render("~/bundles/Layout1JS")

</head>

In my application_start i have:

BundleTable.EnableOptimizations = true;

and web.config

<compilation debug="true" targetFramework="4.0">

This gave me bit of a headache trying to figure why the bundling isnt working specially for the javascript. Some one please advise

kayze
  • 738
  • 8
  • 19
  • 33

1 Answers1

8

The bundling is not working because of this line

<compilation debug="true" targetFramework="4.0">

When in debug, the bundles do not compress or minify as you are "debugging" and being able to see the actual JavaScript and CSS is a good thing when you are debugging. When you have debug set to false (or removed from the tag), then your application is running in release mode. Bundling will occur at that point (unless you set BundleTable.EnableOptimizations = false;) 

<compilation debug="false" targetFramework="4.0">

or 

<compilation targetFramework="4.0">

As pointed out by Mike below, the BundleTable.EnableOptimizations = true; should override the web.config setting. However, it may still be good to get out of debug mode in the case that your project is not overriding that setting.

Tommy
  • 39,592
  • 10
  • 90
  • 121
  • 3
    FWIW I've never had a problem setting `BundleTable.EnableOptimizations = true;` in the debug environment. It's always bundled/minified when that is set, regardless. – MikeSmithDev Nov 01 '14 at 02:36
  • @MikeSmithDev - I did some research and it appears you are correct in that setting overrides the web.config. Today I learned! – Tommy Nov 01 '14 at 02:47
  • Hi, thanks i can now see that the html is indeed generating a bundled javascript : ......However my whole page is broken, none of my javascript or sliders are working – kayze Nov 01 '14 at 03:10
  • @kayze When I first read your question, it appeared to me you have a whole lot of items in a single bundle. You may think about separating them just a tad (for instance, one for jquery, one for plug ins, one for custom js). It could be that combining jquery in with jquery plugins is causing those plugins to fail. Also, if you separate, ensure you render the jquery bundle before any items to depend on jquery – Tommy Nov 01 '14 at 03:15
  • @Tommy the reason for putting all in the same bundle is that there will be less requests to retrieve the JS and CSS files. This improves performance and is best practice. When in debug mode they will not be bundled and you will identify any issues with plugins. You shouldn't be encountering any in production as long as you've tested thoroughly – John Mc Nov 26 '14 at 11:04
  • @JohnMc - I thoroughly understand the reasons for bundling. However, many examples have the bundles split by need. For example, the basic MVC template has a bundle for jQuery and one for jQuery validation as there may be pages that do not need validation. Another could be issue is that ordering of the files in the bundle may not be exactly what you think. If out of order, you would experience some site issues. My suggestion here was - lets break it up just a little bit an ensure ordering isn't a problem (or something else related to num files). http://stackoverflow.com/questions/14563415/ – Tommy Nov 26 '14 at 12:38