一键合并插件和主题的 JS 和 CSS 文件,加快页面加载速度

每个插件和主题可能有自己的 CSS 和 JavaScript 内联代码或者文件,如果 CSS 和 JavaScript 内联代码或者文件一多,就开始出现了两个比较难受的问题:

前端静态文件的问题

1. 前端网页代码就变的很乱,如果 JS 或者 CSS 文件多,还会影响前端的加载速度:

以 Sweet 主题为例,从上图可知,有留言点赞的 JS 代码,主题自带的脚本代码,WPJAM 内容模板的 CSS 代码,然后还有未截图到主题自带的样式文件,还有其他的静态文件,非常多,看起来头疼。😓,文件一多,加载自然就慢。

2. CDN 更新会有问题,WPJAM Basic 「CDN 加速」功能是使用对象存储的镜像回源功能实现的,如下图所示,镜像回源的原理是,只有在对象存储不存在的文件才会到源站去抓取:

那么插件或者主题更新,如果更新了 JS 或者 CSS 文件,并不会同步到对象存储去,CDN 上的文件也不是最新的,所以需要用户自己去对象存储去删除对应的文件,让对象存储重新抓取,并且还要刷新 CDN 上文件,总之很麻烦。

一键合并 JS 和 CSS 文件

有没有什么更好的方法来解决这些问题呢?有的,今天推出的 WPJAM「静态文件」插件就是要专门来解决这个问题的。

它将 WPJAM 插件和主题生成的 JS 和 CSS 内联代码或者文件分别合并成一个文件,并且这两个文件会自动带上时间戳,这样的两个步骤来解决这两个问题。

1. 合并成一个文件:这样就实现前端代码简洁,并且相关的文件也变少,网页加载速度也会明显变快,还是以 Sweet 主题为例,合并之后,个页面除了 jQuery 之外,只剩下合并生成的 JS 和 CSS 文件:

2. 合并的文件加上时间戳:这样就保证每次合并生成的文件是全新的,CDN 加速在镜像回源的时候,都会抓取到最新的 JS 和 CSS 文件了,不怕插件或者主题更新造成问题了。

不过可能造成一个问题,就是可能在对象存储中会生成一堆的 JS/CSS 文件,所以我把这些文件都放到 wp-content/static 目录下,这样如果觉得不爽,就可以批量删除了。

安装和使用 WPJAM「静态文件」插件

WPJAM「静态文件」插件安装很简单,首先从「WordPress果酱」的知识星球下载,然后上传到 wp-content/plugins 目录,最后到 WordPress 后台激活即可。

激活之后,在 WordPress 后台「WPJAM」菜单下就会新增「静态文件」子菜单,点击进入:

首先勾选「合并静态文件」按钮,然后保存,当然如果有额外的脚本和样式也可以先填入,保存之后,页面就会出现当前系统将会合并那些文件和内联的代码:

 

点击这里的「一键合并」按钮就可以生成唯一的 JS 和 CSS 文件了,如果文件内容,没有更新,点击该按钮是不会文件不会被提示更新的:

注册「静态文件」

从上面列表也可以看出,WPJAM「静态文件」插件是不会主动合并主题和插件的 CSS 和 JavaScript 内联代码或者文件,需要其他插件和主题主动去注册WPJAM「静态文件」,插件才会收集,然后生成。那么怎么注册呢?

还是以 Sweet 主题为例,这是之前注册前端文件的代码:

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_style('style', get_stylesheet_directory_uri().'/static/css/sweet.css');
	wp_enqueue_script('sweet', get_stylesheet_directory_uri().'/static/js/sweet.js', ['jquery']);	
});

需要简单修改成:

add_action('wp_enqueue_scripts', function(){
	if(did_action('wpjam_static')){
		wpjam_register_static('sweet-style', [
			'type'		=> 'style',
			'source'	=> 'file',
			'file' 		=> get_stylesheet_directory().'/static/css/sweet.css',
			'baseurl'	=> get_stylesheet_directory_uri().'/static/css/'
		]);

wpjam_register_static('sweet-script', [
'type' => 'script',
'source' => 'file',
'file' => get_stylesheet_directory().'/static/js/sweet.js',
]);
}else{
wp_enqueue_style('style', get_stylesheet_directory_uri().'/static/css/sweet.css');
wp_enqueue_script('sweet', get_stylesheet_directory_uri().'/static/js/sweet.js', ['jquery']);
}
});

WPJAM 「静态文件」插件增加一个名为 'wpjam_static' 的 Action,并且合并功能启用之后才会存在,所以我们可以简单通过 did_action('wpjam_static') 判断,我们安装了 WPJAM 「静态文件」插件,并且已经启用合并功能。

如果已经安装了 WPJAM 「静态文件」插件,并激活合并功能之后,我们就不需要 WordPress 原来的注册脚本和样式,而是通过 wpjam_register_static($key, $args) 把静态文件注册到合并列表中,然后后台点击一下「一键合并」就能合并了。

简单说一下 wpjam_register_static($key, $args) 函数的参数:

$key:注册唯一的 key。

$args:注册的参数,包括:

  • $type:类型,脚本则为:script,样式则为:style
  • $source:来源,如果要合并的内容是,文件则为:file,如果内联代码则为:value
  • $file/$value:根据上个选项,如果 file,值为文件在服务器上的路径,如果 value,值为具体的内联代码。
  • $baseurl:文件才有这个选项,可选,如果文件中使用相对地址的资源,合并之后需要替换成绝对地址,这里如何替换成绝对地址的地址前缀。

目前 Sweet 主题已经支持 WPJAM 「静态文件」插件,WPJAM 出品的所有插件,应该都支持了,比如「内容模板」后台设置的样式也支持了。

其他主题,需要按照上面的方式修改一下你的主题,可以参考一下 Sweet 主题怎么注册即可,还算简单。

WPJAM「静态文件」插件

WPJAM 「静态文件 插件基于 WPJAM Basic 开发,官方授权销售,可联系站长购买!

版权声明:
作者:云小叔-高级程序员
链接:https://liboven.cn/36.html
来源:微芯引擎 秒加载 快如闪电
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
一键合并插件和主题的 JS 和 CSS 文件,加快页面加载速度
每个插件和主题可能有自己的 CSS 和 JavaScript 内联代码或者文件,如果 CSS 和 JavaScript 内联代码或者文件一多,就开始出现了两个比较难受的问题: 前端静……
<<上一篇
下一篇>>
文章目录
关闭
目 录