Minifying and publishing CSS and JavaScript using Visual Studio 2013 and LESS

Question

When I publish my MVC web app I can see that the published location gets the original js and css files, it does get minified when I run it (I can see it in view source)

This is what I'm doing:

        BundleTable.EnableOptimizations = true;

        bundles.UseCdn = false;
        var cssTransformer = new StyleTransformer();
        var jsTransformer = new ScriptTransformer();
        var nullOrderer = new NullOrderer();

        var cssBundle = new StyleBundle("~/bundles/css");
        cssBundle.Include("~/Content/Site.less", "~/Content/bootstrap/bootstrap.less");
        cssBundle.Transforms.Add(cssTransformer);
        cssBundle.Transforms.Add(new CssMinify());
        cssBundle.Orderer = nullOrderer;
        bundles.Add(cssBundle);

        var sampleCssBundle = new StyleBundle("~/bundles/sampleCss");
        sampleCssBundle.Include("~/Content/sample.css");
        sampleCssBundle.Transforms.Add(cssTransformer);
        sampleCssBundle.Transforms.Add(new CssMinify());
        sampleCssBundle.Orderer = nullOrderer;
        bundles.Add(sampleCssBundle);

        var sampleJsBundle = new ScriptBundle("~/bundles/sampleJs");
        sampleJsBundle.Include("~/Scripts/sample.js");
        sampleJsBundle.Transforms.Add(jsTransformer);
        sampleJsBundle.Transforms.Add(new JsMinify());
        sampleJsBundle.Orderer = nullOrderer;
        bundles.Add(sampleJsBundle);

1. will I get a better performance if I deploy a minified version of the files to the published location? (for example: myFile.min.js and myFile.min.css)

2. is there a native way to generate the files in Visual Studio so I can publish it minified? (I could view each minified file and save it as myFile.min but I like to have an automated way to do it)

Thanks in advance.

Answer 1

I'm always excited to see someone tuning their website performance!

1) As long as you are referencing the bundles (and not the published files), publishing minified files will have negligible impact. The bundling system reads the files only once and caches a minified and bundled version in memory. The resulting bundle is identified with a hash that is included in the page and allows browser and proxy caching of the bundle. When your published files change, the bundle will be updated and the page will use the new bundle hash.

This answer has additional information on caching.

If you are interested in automating the "first request" explore Application Initialization

2) The Web Essentials extension by Mads Kristensen has minification support for CSS and JavaScript. As of Visual Studio 2013 Update 4 there is no built-in tooling that would create minified files.