最近发现 WP Rocket 缓存优化之后,IKS Menu 加载会出现一闪而过的样式丢失,一会之后会恢复正常的样式。这是由于 WP Rocket 的 JS 优化导致的加载问题。但是 WP Rocket 中没有针对 IKS 插件的排除选项设置,所以我们需要手动来排除 IKS Menu 的 CSS 和 JS 文件。

加载问题复现一下:

image - WP Rocket 缓存优化之后的IKS Menu 加载问题解决 - NUTSWP

一会之后就会恢复成正常的样式

image 1 - WP Rocket 缓存优化之后的IKS Menu 加载问题解决 - NUTSWP

经过详细测试(将 WP Rocket 中的文件压缩中每个选项关闭,并逐一开启测试),定位到是由于开启了延迟 JS 文件执行导致的加载问题。

image 2 - WP Rocket 缓存优化之后的IKS Menu 加载问题解决 - NUTSWP

也就是说 WP Rocket 再处理 延迟执行 JS 的过程中,延迟了 IKS MENU 的 JS 文件执行,所以导致加载的一瞬间样式没有覆盖到菜单组件。

如果你网站还有其他的加载问题,并且是否勾选延迟执行 JS 对你网站速度影响不大的情况下,你可以关闭这个选项来解决问题。

如果想手动排除 IKS MENU 的 JS 延迟执行,那么可以按照下面的方法操作。

首先确定你的 IKS MENU 插件是免费的还是付费的,或者你可以直接在 网站的插件目录中去查看 IKS MNEU 插件的文件夹名称,然后将目录名称换掉下面路径中的your-plugin-name。

/wp-content/plugins/your-plugin-name/(.*).js

比如我的插件IKS 插件名称为iks-menu-pro,那么我的路径为:

/wp-content/plugins/iks-menu-pro/(.*).js

将这个路径粘贴到延迟 JS 执行选项中的排除 JS 文件框中,保存 WP Rocket 设置。

image 3 - WP Rocket 缓存优化之后的IKS Menu 加载问题解决 - NUTSWP

然后使用无痕模式刷新有 IKS Menu 菜单元素的页面。去查看加载是否正常,如果加载不再出现一瞬间的样式丢失,就代表设置成功了。