1

We are using a large VS 2012 SharePoint solution. We are using many css and js files. We would like to increase the performance. What is the best practice to minimize/compress/bundle css and js files in VS?

Something like I register the path of the css/js files which are included in the masterpage. After each build or deploy these css/js files will be automatic minimized/compressed/bundled. When you go to the sharepoint site it will load 2 files. One is the bundled js file and the other is the bundled css file.

NOTE!

We do not want to bundle all the js/css files from the whole solution. We like to register our self which js/css files needs to minimize/compress/bundle.

If there is a powershell solution, it is also OK.

Improve this question
1
  • I using node.js an option? We use gulp and we're quite happy with that
    – eirikb
    Jun 12, 2015 at 8:54

4 Answers 4

Reset to default
3

How about using the WebEssentials Extension. Bundling and minifying is just one feature you would get out of it.

Others are:

  • A lot of compilers and linters for CSS/JS.
  • Additional Debugging functionality enter image description here
  • Bundling via XML (CSS/JS/Sprites)
  • Better Intellisense
  • and a lot more just check their homepage

Btw. these Tools are added in VS2015 by default and are heavily updated.

Improve this answer
5

I have been using Mavention minifier tool. It is working as expected and you can apply this on the particular files that you wanted. 

MaventionMinifiedCssFileGenerator - for minifying CSS files
MaventionMinifiedJsFileGenerator - for minifying JavaScript files
MaventionObfuscatedJsFileGenerator - for minifying and obfuscating JavaScript files

are the different attributes that you need to apply.

If you want the bundle way rather than applying it on individual file go with msdn.microsoft.com/en-us/library/dn850363.aspx where you will install appropriate web essentials vswebessentials.com/download

Let me know if you have any questions.

Improve this answer
3
  • what about the bundle option? Is it possible to bundle many css files to 1 css file?
    – Ola
    Jun 11, 2015 at 8:58
  • If you want the bundle way rather than applying it on individual file go with msdn.microsoft.com/en-us/library/dn850363.aspx where you will install appropriate web essentials vswebessentials.com/download
    – Naveen
    Jun 11, 2015 at 9:19
  • @Naveen if you add web essentials to your answer I will +1 :)
    – eirikb
    Jun 11, 2015 at 17:17
1

In the past, I had used the AJAX minifier, http://ajaxmin.codeplex.com/, to bundle and minify my JS and CSS fiels as part of a build action. It worked well.

In the end though, I stopped doing it as I wasn't deploying a lot of JS and CSS files. It made real time troubleshooting more difficult and added unneeded complexity to the application, for very insignificant gains in overall file size and http requests.

Improve this answer
0

I used YUI Compressor for .Net. you can bundle/compress css/js files in a post build commando.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.