WPJAM「静态文件」：一键合并 WordPress 插件和主题的 JS 和 CSS 文件，加快页面加载速度

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

前端静态文件的问题

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

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

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

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

一键合并 JS 和 CSS 文件

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

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

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

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

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

简单的安装和使用说明

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 主题怎么注册即可，还算简单。

「WordPress果酱」知识星球福利插件基于 WPJAM Basic 开发，加入「WordPress果酱」知识星球，即可下载：

​