全球主机交流论坛

标题: WordPress动静分离方法汇总 [打印本页]

作者: tlanyan 时间: 2020-10-5 17:02
标题: WordPress动静分离方法汇总
本帖是WordPress性能优化的一个经验贴，原文链接：https://tlanyan.me/wordpress-seprate-static-files-methods/，大佬轻喷

现代网页不仅只有一个html，经常还包含了大量的js脚本、css样式表、图片、字体等资源文件。因浏览器对单域名有连接数限制，优化网页加载速度的一个重要手段是动静分离。前文 WordPress性能优化介绍了常用的WordPress性能优化方法，本文详细介绍几种WordPress动静分离方法。

WordPress动静分离方法

动静分离，即将js脚本、css样式表、图片图标、字体等静态资源文件托管在不同的域名上，从而浏览器可以同时下载页面内容和静态文件，以达到网页加速的目的。

下面介绍本人所知的WordPress动静分离方法，并指出其优缺点。作为例子，下文中总是以 tlanyan.me 为WordPress博客主域名，static.tlanyan.me 为静态资源用的域名。

WordPress域名替换

我们可以在WordPress页面输出前，将静态资源url替换成静态域名，从而达到动静分离的目的。

具体操作为：

1. 创建动态域名的nginx配置文件，输入如下内容：

server {
listen 80;
server_name static.tlanyan.me; # 请替换成自己的域名

return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的域名
}

server {
listen 443 ssl http2;
ssl_certificate ssl证书路径；
ssl_certificate_key ssl密钥路径；
access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=30s;
error_log /var/log/nginx/static.tlanyan.error.log;

root /var/www/tlanyan; # 请修改成网站实际目录

# 非静态资源转发到主站。此配置涉及到安全问题，非常重要，请务必配置！！
location / {
xx
}

2. 在网页内容输出前，修改静态资源域名为静态域名。具体操作是：编辑主题的functions.php文件，加入如下内容：

function replace_domain($content) {
xxx
}

add_action('init', 'replace_domain');

接下来重启Nginx，刷新网站文章，看看图片、js等文件路径的域名有没有换成静态域名吧。

修改WordPress上传域名

对于WordPress，除了主题所用的css、字体等静态资源，主要静态资源是用户上传的图片和文件。好消息便是，用户可以自定义上传目录和上传的域名，从而轻松做到静态分离。

操作方法为：

1. 登录网页后台，打开 https://你的域名/wp-admin/options.php（只能手动在浏览器打开），找到 upload_path 和 upload_url_path 两个选项，第一选项用来设置上传图片存放的文件夹(默认是 wordpress安装目录/wp-content/uploads)，第二个是设置文件的域名：
WordPress自定义上传文件域名
WordPress自定义上传文件域名

2. 我们修改 upload_url_path 为静态域名，然后页面拖到下面点击“保存修改”；

3. 新建静态域名的Nginx配置文件，输入如下内容：

server {
listen 80;
server_name static.tlanyan.me; # 请替换成自己的域名

return 301 https://static.tlanyan.me$request_uri; # 请替换成自己的域名
}

server {
listen 443 ssl http2;
ssl_certificate ssl证书路径；
ssl_certificate_key ssl密钥路径；
access_log /var/log/nginx/static.tlanyan.access.log main buffer=64k flush=30s;
error_log /var/log/nginx/static.tlanyan.error.log;

root /var/www/tlanyan/wp-content/uploads; # 请修改成网站实际目录，注意根目录为 wp-content/uploads
}

由于 wp-content/uploads 目录只有上传的文件，不存在敏感信息，因此无需做额外安全设置。

4. 经过上述配置，新文章中的图片会使用静态域名，但旧文章还是原来的链接。我们可以通过数据库批量更新链接，操作为：登录数据库，执行这个SQL语句：update wp_posts set post_content=replace(post_content, 'tlanyan.me/wp-content/uploads', 'static.tlanyan.me');。注意语句中的tlanyan.me域名请换成你自己的域名。

这样，文章中的图片和文件链接便与文章做到动静分离了。

Nginx重定向

如果我们使用Nginx作为前端服务器，可以通过Nginx重定向功能将所有的静态资源请求转到静态域名。

操作如下：

1. 按照 WordPress域名替换的方法新建静态域名的Nginx配置文件；

2. 在主域名的Nginx配置文件对静态资源做如下转发处理：

server {
  # 其他配置
  # 静态资源文件重定向
  location ~* .*\.(js|css|png|jpeg|jpg|bmp|ico|ogg|ogv|svg|svgz|eot|otf|woff|woff2|mp4|ttf|rss|atom|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
return 301 https://static.tlanyan.me$request_uri; # static.tlanyan.me请改成你的静态域名
  }
  # 其他配置
}

配置好后记得重启Nginx。

Nginx内容替换

WordPress可以做内容替换，Nginx有sub模块同样能替换网页内容，这样无需改动WordPress便能做到静态资源使用静态域名。

操作如下：

1. Nginx的PHP处理中增加如下替换命令：

location ～ \.php$ {
  # 一些fastcgi 配置

  # 替换配置
  sub_filter_once off;
# 请修改成自己的域名
  sub_filter 'https://tlanyan.me/wp-content/uploads' 'https://static.tlanyan.me';
}

2. 按照修改WordPress上传域名中的方法新建静态域名Nginx配置文件，然后重启Nginx。
总结

上文介绍了WordPress动静分离的四种办法，这里简单总结一下四种方法的优缺点：
方法

作者: 电光 时间: 2020-10-5 17:05
楼下来举报一个。

作者: tlanyan 时间: 2020-10-5 17:06

电光发表于 2020-10-5 17:05
楼下来举报一个。

为啥举报？

作者: 蝙蝠侠 时间: 2020-10-5 17:09
太长，看起来好复杂

作者: 蜂蜜柚子茶 时间: 2020-10-5 17:09
好久没人发干货了

作者: cquyf 时间: 2020-10-5 17:10
大佬威武，学习了，哈哈

作者: tlanyan 时间: 2020-10-5 17:11

蝙蝠侠发表于 2020-10-5 17:09
太长，看起来好复杂

介绍了四种方法啊，一般人只选一种就好了

作者: 学到了么 时间: 2020-10-5 17:11
支持大佬

作者: fule 时间: 2020-10-5 17:11
楼主发的自己原创文章，也是有用的文章，为啥有人要举报？

作者: tlanyan 时间: 2020-10-5 17:13

学到了么发表于 2020-10-5 17:11
支持大佬

感谢

作者: tlanyan 时间: 2020-10-5 17:14

fule 发表于 2020-10-5 17:11
楼主发的自己原创文章，也是有用的文章，为啥有人要举报？

我也没看懂举报的逻辑在哪。论坛里挺多人用wp，我这个帖子至少有帮助才是

作者: 哥们 时间: 2020-10-5 17:15
支持帮顶，不明为何举报。

作者: 尼欧一方通行 时间: 2020-10-5 17:19
用oss不就是动静分离吗

作者: tlanyan 时间: 2020-10-5 17:25

尼欧一方通行发表于 2020-10-5 17:19
用oss不就是动静分离吗

这个当然算

作者: tlanyan 时间: 2020-10-5 17:34

fule 发表于 2020-10-5 17:11
楼主发的自己原创文章，也是有用的文章，为啥有人要举报？

文章太长，论坛自动截断

作者: 004 时间: 2020-10-5 17:41
怎么看着乱乱的.. 排版搞一下哈..

作者: 蝙蝠侠 时间: 2020-10-5 17:43

tlanyan 发表于 2020-10-5 17:11
介绍了四种方法啊，一般人只选一种就好了

我用张戈的一段代码弄了，没改这么多东西

作者: tlanyan 时间: 2020-10-5 17:44

004 发表于 2020-10-5 17:41
怎么看着乱乱的.. 排版搞一下哈..

论坛里排版不了，内容太长还被截断了，建议去原文看，或者先收藏，用的时候再看

作者: chendeshen 时间: 2020-10-5 17:49
https://cloud.tencent.com/developer/article/1607761

作者: googlebot2 时间: 2020-10-5 17:52
没用的，生成网页是mysql数据连接太多是慢的主要原因，

作者: tlanyan 时间: 2020-10-5 18:01

蝙蝠侠发表于 2020-10-5 17:43
我用张戈的一段代码弄了，没改这么多东西

张戈的方法是文中的一种，文章里四种方法，看起来就多了

作者: tlanyan 时间: 2020-10-5 18:03

googlebot2 发表于 2020-10-5 17:52
没用的，生成网页是mysql数据连接太多是慢的主要原因，

只是性能优化的一步，网页生成慢的话改善有限

作者: hellowz 时间: 2020-10-5 21:38
学习一下

欢迎光临全球主机交流论坛 (https://hostloc.onozo.cc/)