Plugin-conflict: LiteSpeed Cache (with Page Optimization > JS Minify)

[exetico]

Describe the bug The page are breaking, if page optimizations are turned on in LiteSpeed Cache, and WordPress Popular Posts are enabled, at the same time. This started as pr. the latest version of WPP (5.4.0). Roll-back, and everything's working again.

To Reproduce Steps to reproduce the behavior:

1. Setup server with LiteSpeed
2. Add LiteSpeed Cache, and enable it
3. Go to Page Optimization > JS Settings > Change "JS Minify" to "Yes"
4. See errors in console

The first error minified shows up here: ({value:r*e.length+t});)}const i=[];return e.forEach

Expected behavior Page to load without issues.

Screenshots

Environment:

• WordPress version: 5.8
• PHP version: 7.4.12
• Database version: MariaDB (I don't have the information on-hand, but it's not relevant)
• Plugin version: 5.4.0
• Active plugins: LiteSpeed Cache, WordPress Popular Posts

Additional context I've mentioned this issue in a PR lately. I'm not sure if you can do anything from your end, or if it should be handled by the LiteSpeed Cache team.

[exetico]

I've mentioned this on the GoLiteSpeed #wpcache chat, too.

More info here: https://golitespeed.slack.com/archives/C3RJHNBTQ/p1629474178220500

[cabrerahector]

Hi Tobias,

Unfortunately I don't have access to a LiteSpeed server to debug this problem. If you can provide temporary admin credentials to your site (or to a staging site if you have one) I might be able to help.

As I mentioned on your PR the other day, I'd rather not have to register a Slack account to see additional details. Please use a different, more public method to share info.

[cabrerahector]

Something I found on Elementor's Github repository from another user experiencing the exact same issues with LiteSpeed Cache, might be worth checking out:

I discovered that the problem goes away by setting "JS Combine" to OFF in LiteSpeed Cache > Page Optimization > JS Settings. However this is not a good solution: when loading a page many HTTP requests are fired to get JS files!

So, I read this guide and, after many clicks, solved the issue by setting in LiteSpeed Cache > Page Optimization > Tuning > JS Excludes the following:

api-fetch.min.js
hooks.min.js
i18n.min.js
jquery.js
jquery.min.js
lodash.min.js
script.js
vue.min.js
wp-polyfill.min.js

Source: https://github.com/elementor/elementor/issues/13708#issuecomment-808229573

Edit: the files listed above are all inside wp-includes/js/dist/, they're core WordPress JS files.

Also found this on a WordPress.org forum topic, although the first one might be a bit too aggressive of a solution:

Excluding wp-includes/js/dist/ has fixed the problem.

and

For me excluding only wp-includes/js/dist/i18n.min.js has fixed the issue.

[exetico]

Hi Héctor

I've already tried that a few times, with no luck. I should have mentioned that, in the issue. Sorry about that.

One pointed our that combining the files doesn't really matter in HTTP2/3... So maybe it's not really a problem, not combing the files.

However, if you like, I can sent you access to a env., where you're able to play around with it, if you like...?

Fell free to let me know here, or sent me a email :-) (Else, I'll do it)

Update: By disabling "JS Combine External and Inline", it actually works with:

wp-includes/js/dist/

I have tried with a few combinations, where most of the files from wp-includes/js/dist/ are listed, too. But sadly, with no luck. I guess it's possible... But I don't think it's worth spending the time on that.

[cabrerahector]

I have tried with a few combinations, where most of the files from wp-includes/js/dist/ are listed, too. But sadly, with no luck.

That's odd. Someone with your exact same problem reported on WPP's support forum that the suggestions from my previous comment worked for them (https://wordpress.org/support/topic/posible-conflicto-con-complianz/page/2/#post-14789417, it's in Spanish so you may need to use Google Translate).

However, if you like, I can sent you access to a env., where you're able to play around with it, if you like...?

Fell free to let me know here, or sent me a email :-) (Else, I'll do it)

Yeah, that would help. Please reach out to me via the contact form on my website: https://cabrerahector.com/about/#say-hi

[exetico]

As mentioned in the "Update-part" of the post, it's working with:

• wp-includes/js/dist/
• JS Combine Externaldisabled

Here's two screenshots, for other people dropping by, or sent to this thread:

Plugin-info: Version 4.3 | By LiteSpeed Technologies

So, that's the combo to use for LS Cache.

I'm not sure if it will give you more insights, by looking at the demo-site. But if you'd like to fiddle around and "get the right combo", I can send it right away :-)

Let me know, if it's still relevant?

[cabrerahector]

Yep, I'd like to play around with the settings and see if there's a more optimal way to deal with this issue so I make a better recommendation to others LiteSpeed users having the same problem.

[exetico]

Cool. It's now sent! If you're facing any issues replying to the email as stated in the form, fell free to use the one mentioned here on GitHub.

[cabrerahector]

Alright, I played around with LS Cache's settings and as you said that configuration does seem to fix the issue so thanks for sharing!

Summary (in case the screenshots above break in the future):

1. LiteSpeed Cache > Page Optimization > JS Settings, make sure that JS Combine External and Inline is set to Off (and save changes).
2. LiteSpeed Cache > Page Optimization > Tuning, add wp-includes/js/dist/ to JS Excludes, save changes.
3. LiteSpeed Cache > Toolbox > Purge All.

[exetico]

Yep, that's the way. It would be nice to have a simple amount of files, instead of the whole /dist folder... But sadly, I didn't manage to find the right combo 👍 !

I'll close this one. Thanks for your inputs!

[cabrerahector]

Hey Tobias!

I just pushed an update that should eliminate the need to have LS Cache exclude files from the wp-includes/js/dist/ folder.

Please:

1. Remove wp-includes/js/dist/ from LiteSpeed Cache > Page Optimization > Tuning > JS Excludes and save changes.
2. Purge LS' cache using the Purge All option.
3. Test and report back if you find any issues.

[exetico]

Hi Héctor,

I didn't expect that - but that's great news, for sure!

Was it something in relation to the implementation of the newest block-solution, or? (I've not checked that part in the source-code).

I can confirm that it's working on both my testing-suite. So I've also updated one of the prod-sites I'm controlling, and that works too 🎉 !

Thanks! 😄

Update: Oh, it must be this. It's (almost) always good practice to use wp_register_script instead of wp_enqueue_script 🥳 .

[cabrerahector]

As a full-time WP developer I normally use wp_enqueue_script since that's OK when working on themes and plugins in most cases (in my experience so far at least). Haven't had much need to use wp_register_script except for a couple of specific use cases.

When it comes to block development though, something I'm not that experienced with yet, it does matter.

I had no idea that WordPress would enqueue editor files in the front-end if I used wp_enqueue_script instead of wp_register_script. I was kinda expecting WordPress to know what to do with the file (and its dependencies) and when. In hindsight it's obvious now.

I even spent a good couple of hours scouring their Github repo, hoping to find other people having the same problem since I felt that there was something wrong but couldn't pinpoint the reason. "This can't be right." And then it hit me. "Oh, wait, maybe the documentation says that I have to use register instead?" Lo and behold, yeah, the documentation does show an example using register and not enqueue (although in my defense it doesn't explicitly explain why, had to learn the hard way haha).

It's thanks to you and other people that I was able to eventually figure it out (I really couldn't get this whole thing out of my mind, even after helping you and others) so thanks for the push :)

[exetico]

Thank you for the follow up! 🙏