Smidge Minifcation Doesn't Apply To Resources

[EvilDrPorkChop]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

11.2.2

Bug summary

I've set up Smidge as per the Umbraco documentation but I seem to be running into an issue with minification specifically where CSS & JS files don't have any minification applied to them regardless of the Bundling options used.

Bundling & rendering work absolutely fine and I can use the smidge helper to render out the Smidge processed URLs (no minification though).
The cache on disk is also building properly from what I can see. The same problem also applies to running it in memory mode.

I've tried changing all the settings within the Umbraco project, running smidge in Version, AppDomain & TimeStamp mode, running Umbraco in production mode, and building with the release flag but I have got the same result. I was able to reproduce this on two clean installs, one using the starter kit and one with a small amount of basic css/js.

Specifics

No response

Steps to reproduce

Clean Install + Starter Kit is enough to reproduce

Setup Smidge Middleware as per documentation: https://docs.umbraco.com/umbraco-cms/fundamentals/design/stylesheets-javascript#bundling-and-minification-for-javascript-and-css

Set bundling options to OptimizedNotComposite or OmptimizedAndComposite (neither minify)

Set runtime minification settings: https://docs.umbraco.com/umbraco-cms/reference/configuration/runtimeminificationsettings

Set Hosting Debug to false in appsettings

Build the site in Release mode

Check resource URLs in the HTML source code

Expected result / actual result

CSS/JS resources would be minified.

[github-actions]

Hi there @EvilDrPorkChop!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[kjac]

Hi @EvilDrPorkChop,

Thank you for raising this. Unfortunately I can't reproduce this on the latest V11 (which should be entirely similar to your version in terms of Smidge).

My test code looks like this:

public class CreateBundlesNotificationHandler : INotificationHandler<UmbracoApplicationStartingNotification>
{
    private readonly IRuntimeMinifier _runtimeMinifier;
    private readonly IRuntimeState _runtimeState;

    public CreateBundlesNotificationHandler(IRuntimeMinifier runtimeMinifier, IRuntimeState runtimeState) {
        _runtimeMinifier = runtimeMinifier;
        _runtimeState = runtimeState;
    }

    public void Handle(UmbracoApplicationStartingNotification notification)
    {
        if (_runtimeState.Level == RuntimeLevel.Run)
        {
            _runtimeMinifier.CreateJsBundle("registered-js-bundle",
                BundlingOptions.OptimizedAndComposite,
                new[] { "~/scripts/script-one.js", "~/scripts/script-two.js" });
        }
    }
}

public class BundleComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
        => builder.AddNotificationHandler<UmbracoApplicationStartingNotification, CreateBundlesNotificationHandler>();
}

The two scripts look like this:

// this is script-one.js
function functionOne()
{
    alert("Hello from function one");
}

// this is script-two.js
function functionTwo()
{
    alert("Hello from function two");
}

Given the test template:

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
<html>
<head>
    <script src="registered-js-bundle"></script>
</head>
<body>
Hello, world
</body>
</html>

...the rendered page output becomes:

...and the smidge bundle contains:

function functionOne(){alert("Hello from function one")};
function functionTwo(){alert("Hello from function two")};
//# sourceMappingURL=/sb/nmap/registered-js-bundle.js.v638168863900000000

The runtime minification is configured as per default, I believe; some in appsettings.json, some in appsettings.Development.json, but it sums up to this:

"RuntimeMinification": {
  "dataFolder": "umbraco/Data/TEMP/Smidge",
  "version": "637642136775050602",
  "useInMemoryCache": true,
  "cacheBuster": "Timestamp"
},

Could you please double check your code with the sample above?

[EvilDrPorkChop]

Hi @kjac,

Thanks for your help so far.

Following your steps produced no change for us and is nearly identical to our setup aside from the JS/CSS we are working with. The code will bundle but none of the code it produces is minified, it is, however, removing the spaces but this is exactly the same behaviour as previously.

Our setup currently looks like this

public class CreateBundlesNotificationHandler : INotificationHandler<UmbracoApplicationStartingNotification>
{
    private readonly IRuntimeMinifier _runtimeMinifier;

    private readonly IRuntimeState _runtimeState;

    public CreateBundlesNotificationHandler(
        IRuntimeMinifier runtimeMinifier,
        IRuntimeState runtimeState)
    {
        _runtimeMinifier = runtimeMinifier;
        _runtimeState = runtimeState;
    }

    public void Handle(UmbracoApplicationStartingNotification notification)
    {
        if (_runtimeState.Level == RuntimeLevel.Run)
        {
			_runtimeMinifier.CreateJsBundle(
	            "header-js-bundle",
	            BundlingOptions.OptimizedAndComposite,
	            new[]
	            {
					"~/scripts/analytics.js",
	            });

			_runtimeMinifier.CreateJsBundle(
                "main-js-bundle",
                BundlingOptions.OptimizedAndComposite,
                new[]
                {
                    "~/scripts/main.js",
                    "~/scripts/pricing.js",
					"~/scripts/vendor/cash-extend.js",
                });

            _runtimeMinifier.CreateCssBundle(
                "main-css-bundle",
                BundlingOptions.OptimizedNotComposite,
                new[]
                {
                    "~/css/fonts.css",
                    "~/css/global.css",
                    "~/css/tailwind.css",
                    "~/css/umbraco-default.css",
					"~/css/mainBlockGridRTE.css",
                });
        }
    }
}

Some JS Function examples:

    function headerPinnedState() {
        var scroll = $(window).scrollTop();
        var header = $standardNav().height() - 15;
        if (scroll >= header) {
            if (!$body().hasClass("pin-nav")) {
                $body().addClass("pin-nav");
            }
        } else if (scroll < header) {
            if ($body().hasClass("pin-nav")) {
                $body().removeClass("pin-nav");
            }
        }
    }

    function toggleMobileNav() {
        $mobileNav().toggleClass("hidden");
        var opacity = $mobileNav().css("opacity");
        if (opacity > 0) {
            $mobileNav().css("opacity", 0);
        } else {
            $mobileNav().css("opacity", 1);
        }
    }

With this HTML shell

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage;
@using Umbraco.Cms.Web.Common.PublishedModels;
@using Umbraco.Cms.Core.Models
<html>
<head>
</head>
<body>
<script src="main-js-bundle"></script>
</body>
</html>

Outputs:

Code Sample in the bundle for the above JS functions:

function headerPinnedState(){var scroll=$(window).scrollTop(),header=$standardNav().height()-15;scroll>=header?$body().hasClass("pin-nav")||$body().addClass("pin-nav"):scroll<header&&$body().hasClass("pin-nav")&&$body().removeClass("pin-nav")}function toggleMobileNav(){$mobileNav().toggleClass("hidden");var opacity=$mobileNav().css("opacity");opacity>0?$mobileNav().css("opacity",0):$mobileNav().css("opacity",1)}

The only change is the removal of whitespace in the file and the bundling of multiple files which is inconsistent with the highly minified code we can see being produced in the Smidge cache for JS & CSS that Umbraco uses. E.g.:

We've been able to reproduce this consistently so I'm not sure what to suggest as a next step, let me know if you want me to try anything else.

[nielslyngsoe]

Hi @EvilDrPorkChop

Did you have any success on this matter? Smidge has been upgraded in versions since v.11, so I'm interested in hearing if this problem vanished along the way?

Thanks in advance