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

科技2周前发布 iowen

13 0 0

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

前端静态文件的问题

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

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

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

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

那么插件或者主题更新，如果更新了 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']);
	}
});