10

What is the officially blessed way to minify and bundle js/css in Visual Studio?

Up until last year, Bundler and Minifier was the Microsoft promoted way to go, but it's been abandoned and has some significant issues to boot.

So what is the currently supported way to bundle and minify JavaScript and CSS in Visual Studio 2019?

Improve this question

2 Answers 2

Reset to default
3

The Bundler and Minifier extension integrates with the CommandTaskRunner extension (which is still an active project) and can convert the bundleconfig.json files into Node/npm/Gulp tasks which do the same thing.

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Given that the extension itself has been abandoned, this approach is abandoned as well, no? Since it uses the extension.
@AngryHacker Sort-of. My point is that you should use the Bundler+Minifier extension to generate the Gulp task, then add the Gulp task to source-control, which you can then run with the Task Runner after you then remove the Bundler+Minifier extension.
I thought so too. But the moment you disable the extension, the bundleconfig.json task disappears from the Task Runner Explorer.
But besides that, the extension has other problems like if you bundle 10 .js files into foo.js and foo.min.js, the source map for the .min.js just references foo.js instead of referencing all constituent files. This makes debugging via source map difficult. As a result, I am looking for an alternative - haven't found it yet.
3

The bundle & minifier on the marketplace is abandonware. last update was in 2018.

Visual studio has now its own bundle & minifier called BuildBundlerMinifier and its last update was in 2020. it has more options like Grunt/Gulp, or converting to ES5 (with gulp-terser). It uses the same bundleconnfig.cfg json setup.

Files that can be minified are Js, Css and Html.

More info and how to install you can find it here.

Package manager Install-Package BuildBundlerMinifier -Version 3.2.449

Update February 2024: It's still an issue in Visual Studio .net(core-X) bundling and minifying js and css. There is no native support out of the box anymore. In the VS extensions manager, there is a Fork called bundler&minifier 2022+. It's better than the old one and uses a (somewhat) recent version of NUglify, but not so recent that it support latest CSS addons.

However, Grunt can also work but Grunt is a bit insecure by today's standards and now legacy.

You have other options in the like of (according to the usage statistics and GIT activity) Webpack, Parcel and Vite. Vite seems to be all the Hype now. Integration of those minifiers into VS is not as easy and for pure .net core project (not VUE or React based projects) it's a learning curve of their configs.

Another alternative for Visual Studio seems to be LigerShark Weboptimizer (nuGet package here). I would recomend you try this first.

Improve this answer

3 Comments

The BuildBundlerMinifier package is built on top of Bundler and Minifier and is produced out of the same repo. I ended up using Uglify-JS and CleanCSS combo to do the work.
That link to the Microsoft page makes no mention of BuildBundlerMinifier.
Here is the link to the package nuget.org/packages/BuildBundlerMinifier

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.