共计 8305 个字符，预计需要花费 21 分钟才能阅读完成。
通过我的钻研发现，这个办法居然比拟通用，于是转载群发之
veImageX 是 字节跳动 旗下的 火山引擎 推出的图像、文档等 各类素材上传、托管、智能解决和 CDN 散发 一站式解决方案，WPJAM Basic 的「CDN 减速」性能也在第一工夫整合了 veImageX。
通过该性能，能够轻松让 WordPress 对动态资源进行 CDN 减速，为了不便大家的应用，我整顿一个十分长的齐全指南，基本上笼罩了 WordPress 应用火山引擎 veImageX 进行动态资源 CDN 减速的方方面面，欢送大家珍藏，不便碰到问题时候查问。
veImageX 的镜像回源性能原理
首先咱们说一下背地的原理，WPJAM Basic 的 CDN 减速性能是应用 veImageX 的镜像回源的性能实现的，所以为了不便了解和操作，倡议应用之前首先要了解镜像回源的原理。
当网站的用户申请的资源不存在的时候，能够通过回源规定从设定的源地址获取到正确的数据，而后再返回给网站的用户。
WordPress 博客上的图片，CSS，JS 这些动态文件个别都是不会常常批改的，应用镜像回源性能把这些动态文件资源镜像到 veImageX 的服务器上，网站用户拜访的时候就间接从 veImageX 的服务器上读取数据，这样能够 升高网站服务器读取数据的压力 和进步网站的速度 。
并且应用镜像回源性能实现动态资源 CDN 减速并不影响 WordPress 原来的应用体验，原来怎么上传图片还是持续在 WordPress 中怎么操作即可。
为什么不间接上传到 veImageX？
从后面的介绍可知，用户还是要首先将图片上传到 WordPress 的媒体库，而后再通过镜像回源的性能来同步到 veImageX。为什么不间接上传到到 veImageX 呢？这样就不必通过 WordPress 媒体库。
如果要实现间接上传，须要对接 veImageX 的 API，这个须要额定的工夫开发，并且每家的云存储提供的 API 略有不同，每减少一个云存储服务，都须要额定的二次开发，而每家云存储的 镜像回源性能基本一致 ，并且 API 对接还会存在肯定失败率。
应用镜像回源性能还有一个益处，就是曾经公布的历史文章外面的图片也能镜像到 veImageX 上，咱们所须要做只须要依照上面的指引设置好即可，其余什么都不必做，而后用户拜访之后，网站上的所有图片都会全副主动镜像到 veImageX。
一步一步教你应用 veImageX
理解分明 WPJAM Basic 对接 veImageX 的原理之后，上面咱们开始一步一步开明和应用 veImageX，一共有 7 个步骤，然而齐全不必放心，只有急躁跟着步骤做就能够完满搞定。
1. 首先 注册开明火山引擎 veImageX 产品 ，记得点我的链接，火山引擎会给我返佣，看在我做的插件，和那么辛苦写教程份上，所以肯定要点击这个链接哦。
开明的时候填写我的邀请码：CLEMNL，能够支付福利：每月收费额度（10GB 流量 +10GB 存储 +20TB 根底解决）+https 拜访收费 + 回源流量收费。
2. 而后开启火山引擎的 veImageX 服务，点击点击右侧「服务治理」按钮，创立一个新的存储空间：
- 服务名称：依据本人的填入。
- 地区：依据你网站用户在哪里最多抉择。
- 服务类型：抉择 图像处理服务。
- 绑定域名：请输出你要绑定的 CDN 域名。
- 服务属性：抉择永恒保留。
而后点击保留，火山引擎就会审核你的服务，审核好之后，火山引擎就会给你一个绑定域名的 CNAME 值，把它填到你域名治理的对应 CDN 子域名的 CNAME 外面。
3. 创立好服务之后，咱们要进行镜像回源设置，点击上图的「根底配置」按钮：
首先能够设置 CDN 域名的 https 证书：
这一块比较简单，我就不做介绍了，接着关上源地址拜访：
而后页面往下滚动，就能够进行设置 镜像回源：
咱们只须要在主回源地址填入 WordPress 博客的域名即可，备用回源地址在前面迁徙可能用到，这里临时留空。
4. 接着要设置 veImageX 的图片解决模板，用于智能缩放和裁剪图片，在后面第二步生成的服务中，点击「图片配置」按钮，进入 图片解决配置 页面，点击「新建模板」:
首先惯例编辑，模板名称，依据本人的爱好进行设置，输入源格局抉择原格局即可。
编辑操作就要求比拟严格，要 首先设置缩放 ， 而后再设置裁剪 ， 缩放的宽高 和裁剪的尺寸 都抉择 URL 输出 ，这样就能适配 WordPress 中各种尺寸的图片缩放和裁剪的需要。
设置好之后，将会失去一个模板配置参数，比方我设置的：~tplv-g7ckde5uoo-image:resize_width:resize_height:crop_width:crop_height.image
这里 resize_width:resize_height:crop_width:crop_height 这一段肯定要有，并且要程序和这里保持一致。
5. 在 veImageX 后盾设置后之后，咱们回到 WordPress 博客后盾，装置好 WPJAM Basic 插件之后，在 WordPress 后盾点击菜单「WPJAM」>「CDN 减速」：
云存储：抉择 火山引擎 veImageX。
CDN 域名：输出在 veImageX 中设置的域名。
图片解决：倡议勾选上，这样咱们就能够应用 veImageX 对图片进行缩放和裁剪等操作了。
6. 而后咱们先切换到「图片设置」标签下，进行缩图和其余图片的设置设置
首先是缩图性能，因为 veImagex 曾经提供更为弱小的缩图性能，这里首先提供一个选项，间接应用 veImagex 的缩图性能，本地就无需再生成各种尺寸的缩略图了。
而后还能够设置文章中图片的尺寸，比方上图中设置为 600，那么文章中图片最大图片宽度为 1200（2 倍高清图显示），超过的图片会被缩放到 1200 宽度，这样就不怕大图破费 CDN 流量了，这个倡议依据前端网页的宽度来设置。
接着是 WebP 格局，反对主动将任意格局的图片转换成 WebP 格局，通过我测试 应用 WebP 图片格式能够省一半的流量费，所以无需狐疑，间接开启。
最初输出方才在 veImageX 后盾生成的「模板配置参数」，WordPress 是依据这个配置进行智能缩放和裁剪解决的。
7. 最初 WordPress 博客本地还须要进行本地域名和文件扩展名等的设置：
首先输出的是本地域名，就是 WordPress 博客的域名，特地留神的是，肯定要把 本地域名也填入 veImageX 的镜像源 中。
veImageX 最初是否失效就是这里起作用的，程序会把页面中的动态资源地址替换成 CDN 上的动态文件地址，用户拜访网站看到动态文件就会是 CDN 上的地址，如果 CDN 上没有这个文件，veImageX 就会通过咱们在镜像源中设置的地址来抓取并保留到 veImageX 中，而后再进行 CDN 减速。
而后如果站点中有些动态资源的链接是 // 域名 / 图片地址.jpg 这样的无 HTTP 模式，如果须要把这部分动态资源也镜像到 veImageX，那么就要开启「无 HTPP 替换」这个选项。
接着输出要 CDN 减速的动态文件的扩展名，默认反对 png / jpg / jpeg / gif / ico 这罕用的五种图片扩展名，如果你想反对 JS 和 CSS 也 CDN 减速，你也能够把 js / css 退出。
持续输出要 CDN 减速的动态文件所在的目录，这里的设置和下面的设置会形成一个正则表达式，而后应用这个正则表达式来替换本地的动态文件地址为 CDN 上的动态文件地址。
额定域名根本用不到，如果你是从别的云存储迁徙过去的，可能会用失去，咱们在前面再讲。
如何迁徙到 veImageX
因为火山引擎 veImageX 上线的工夫比拟晚，所以绝大部分的 WordPress 博客都曾经应用了其余云存储服务，很多人可能基于稳固压倒一切的想法，胆怯出问题，就不想迁徙了。
其实迁徙基本不会有什么大的问题，并且当初火山引擎推广期间，应用我的邀请码 CLEMNL，能够支付福利：每月收费额度（10GB 流量 +10GB 存储 +20TB 根底解决）+https 拜访收费 + 回源流量收费 ，对于很多博客来说，根本就不要钱了。
在迁徙之前，可能本地的图片被删除了，为什么呢？
因为当所有本地图片镜像到云存储之后，本地的图片是能够删除的 ，这时候用户拜访图片是云存储上的，本地的图片是不会再被拜访了，所以有些服务器空间比拟小用户，就会删除本人服务器上的图片，节俭空间。
这个删除本地图片的操作就造成迁徙的时候产生了两种状况，大家依据本人的状况来抉择操作：
第一种，图片在本人的服务器还有保留 ：这种状况迁徙非常简单，CDN 域名都不须要换。
这种状况齐全依照下面 veImageX 开明和应用指引进行操作，没有任何额定的问题，在新的服务那里设置回源站点，最初 把 CDN 域名依照新的服务要求批改解析 即可，搞定之后期待用户拜访你站点的时候，新的对象存储服务就会到你的服务器去抓取图片，而后展现给用户。
第二种，本人服务器上全副或者局部删除图片了 ，这个时候就有点简单， 须要应用一个新的 CDN 域名 。为了更好的了解，假如咱们从七牛云存储迁徙到 veImageX：
博客源站域名是：https://blog.wpjam.com。
在七牛设置的 CDN 域名是：https://cdn.wpjam.com
在 veImageX 新的 CDN 域名是：https://cdnnew.wpjam.com，
首先还是一样依据下面 veImageX 开明和应用指引进行操作，而后有两个不同的中央：
1. 在 veImageX 设置镜像回源的中央，除了本人服务器域名之外，还须要把在七牛 设置 的 CDN 域名也要增加到备用源站地址，就是利用 veImageX 镜像回源性能会顺次匹配的能力去实现的，本地图片删除了，就到原来 CDN 去抓取。
2. 而后 依照 veImageX 的要求，解析新的 CDN 域名 **：https://cdnnew.wpjam.com，在七牛设置的 CDN 域名 https://cdn.wpjam.com 的解析放弃不变。
3. 最初回到 WPJAM Basic 的「CDN 减速」性能设置界面，把原来在七牛云存储的 CDN 域名（https://cdn.wpjam.com）填入「本地设置」标签下的「 额定域名」中，把新的 CDN 域名（https://cdnnew.wpjam.com）填入「云存储设置」标签下的「CDN 域名」中。
应用 veImageX 常见问题
尽管下面的 veImageX 的应用指引曾经十分具体了，然而很多小伙伴在应用的时候，还是常常碰到一些问题，上面我把常见的问题整顿一下：
1. 设置好之后，怎么判断胜利了？
其实很好判断，简略说，关上本人网站，按 F12 查看网页源代码，看看图片的地址是不是替换成 CDN 域名了，如果图片都替换成 CDN 域名，则 根本 阐明失效了。
为什么要加上 根本 呢？可能局部用户的 CDN 域名没有依照要求解析到 CDN 上，所以还须要做最初一步的确认。
间接关上其中的一张图片查看其响应标头，看看响应标头外面有 X-Powered-By: ImageX 的响应标头：
2. 为什么 veImageX 的空间里没有看到任何的文件？
veImageX 通过镜像回源的形式把博客外面的图片抓取到 veImageX 的空间是实时的，然而 veImageX 的空间外面文件列表的显示是有提早的，所以有时候可能看不到最新文件，如果刚刚应用「CDN 减速」性能，可能 veImageX 的空间里没有任何文件。
veImageX 的空间的文件列表因为缓存而造成显示提早，这个并不会影响图片和其余动态资源的减速和应用，所以无需太过放心，正确的检测 CDN 减速胜利，还是应用后面的办法：查看文件的响应标头是否有 veImageX 的非凡标头。
这里在特地分享一个案例，有些用户应用了 CDN 减速之后，发现图片都没有显示，前面过了一段时间才显示，并且 还造成网站更慢 。
这是因为他的服务器带宽比拟小，设置了 CDN 减速之后，veImageX 的镜像回源的爬虫来到他的服务器来抓取所有的动态资源，短时间抓取很多文件，并发很大，小水管卡住了，所以刚刚设置的时候，没有显示，甚至款式都乱了，缓缓等一下，等图片和动态资源都抓取实现，小水管终于通了，并且不必解决动态资源，小水管服务器也能够网站速度很快。
3. 我感觉什么都设置好了，然而图片还是不显示？
首先要不要你感觉，要我感觉。😄
因为感觉的事件很多时候总是不对的，碰到这类问题，第一步还是对着文档，认真的再次操作一遍，据我的教训：99% 都是因为 在 veImageX 没有设置镜像回源的站点 ，这一点特地检查一下。
如果你确保你都依照文档操作了，并且也设置了镜像回源，那么看看上面这些和插件没关系然而 可能影响图片显示 的问题：
- 网站是 https 了，然而 CDN 还是 http，大哥，在 https 页面下，http 的资源是不加载的 ，这是浏览器的平安要求， 去对象存储设置一下 ssl 证书 吧。
- 你的服务器是不是 阻止了 veImageX 通过镜像回源性能来你站点的抓取资源的爬虫，去你的服务器防火墙设置看看，特地是应用宝塔的用户，是不是宝塔的防火墙设置了。
- 有用户报告：局部对象存储 不反对带 SNI 的 https 形式回源，那么你的站点动态资源是否反对 http 拜访，反对，那就去回源地址改成 http 的域名，如果不反对，那只能更新一下你的 ssl 证书了。
4. 为什么 Revolution slider 的幻灯片不走 CDN，还是本地域名？
这个问题能够归类为 为什么局部图片没有被替换成 CDN 域名，还是本地域名 ，拿 Revolution slider 插件进去说，因为因为这个插件用户比拟多，碰到的人比拟多。
因为后面也说了 在 https 页面下，http 的资源是不加载的 ，所以局部插件或者主题的做法就是，输入的图片没有 http: 或者 https:，间接以 // 开始，这样浏览器就会将以后网页 http 协定主动匹配到图片链接上，这个是一个比拟讨巧的解决办法， 避免在 https 页面下，呈现图片的链接是 http 而不加载 。
其实对于 WordPress 正确的做法是应用 set_url_scheme 函数来解决，它会主动依据页面 http 协定给图片加上对应的协定，不过这个要批改插件和主题的源代码，对于很多人来说并不适合。
所以我在「CDN 减速」性能中减少了「将无 http:// 或https://的动态资源也进行镜像解决」的选项，你只有勾选一下，这些图片也会被替换成 CDN 域名，所以去勾选一下，而后刷新一下页面再看看是不是否都替换成 CDN 域名了：
为了效率思考，该选项默认是没有开启的，如果没有这个问题，也不倡议开启 。
另外局部用户通过浏览器开发者工具看到个别的 JS 没有局部替换成 CDN 域名，简略看了一下，这几个 JS 不是 PHP 间接加载的，是通过其余 JS 加载的，所以无奈替换，只能通过更改你的主题代码来实现。
5. 为什么应用 veImageX 之后，整个页面乱了？
依照后面介绍的镜像回源的原理：veImageX 只有在资源不存在的状况下才向源站抓取内容 ，具体点说，就是当站点的用户第一次拜访某个资源的时候，veImageX 才会向源站申请抓取资源，之后站点的用户再次拜访同个资源的时候，veImageX 上曾经有对应的资源了，就间接返回不再去向源站申请抓取了。
所以如果 veImageX 上曾经有了网站的 CSS 文件，在本地批改款式是不会失效的，比方站点主题更新了，CSS 文件曾经做了很大批改，这时候降级主题，HTML 构造都降级了，然而 CSS 文件还是旧版的，这时候可能就会造成整个页面乱了。
6. 怎么解决网站款式不同步的问题？
其实这个问题就是 怎么更新 veImageX 下面的款式文件 ，这里有三个方法，咱们一一列举一下：
第一，咱们间接 不镜像 CSS 文件 ，这样款式文件还是服务器本地的，怎么批改都会时时更新，页面必定不会乱了，然而这样也十分不好，CSS 文件还是跑服务器本地，不能应用 CDN 的减速性能。
这个办法是最简略的，如果上面的办法对你太难，或者你没有操作失效，倡议还是回到这个办法来解决，问题解决最重要。
具体操纵在下图的本地设置中，扩展名不要填 CSS，如果 JS 文件也有同样的问题，也倡议不要填。
第二，去 veImageX 下面删除 CSS 文件 ，这样用户再次拜访这个资源的时候，就会从新到源站抓取一次，就能保障批改的也更新到 CDN 上。
然而这样每次批改文件都要去 CDN 上删除一下，更新的文件多的话，就会比拟麻烦，而后 CDN 都会有 304 缓存，所以即便 CDN 上刷新了，也要本地浏览器缓存清理一下能力看到成果，这个会很繁琐。
第三，还有一种办法，应用 WPJAM「动态文件」插件，它将 WPJAM 插件和主题生成的 JS 和 CSS 内联代码或者文件别离合并成一个文件，并且这两个文件名会主动带上工夫戳，这样因为生成的是新文件，用户拜访到的都是最新的，这个惟一的缺点是只反对 WPJAM 出品的插件和主题。
7. 我本地删除了图片，veImageX 上会同时删除图片吗？
首先简略答复：不会 。
因为 WPJAM Basic 的「CDN 减速」是应用 veImageX 的镜像回源的性能实现的，镜像回源只有一个操作，只有用户申请的资源在 veImageX 空间中不存在的时候，才会去设定的源站点抓取。
而间接在源站点（WordPress 本地）批改或者删除文件，veImageX 是不会感知到的，所以也不会从新抓取。如果肯定要让 veImageX 晓得，是要被动告诉的，而实现这个是须要对接 API，而 WPJAM Basic 的「CDN 减速」没有让大家填 veImageX API 所需的 AppID 和密钥中央，所以不反对间接上传图片到 veImageX，也不反对批改和删除。
如果你本地删除了图片，想同时删除 veImageX 上的图片，则须要到 veImageX 后盾的内容治理中找到对应的文件，而后间接删除即可。
8. 为什么我小程序上图片不显示了？
这是因为很多用户为了节约费用，避免图片被人盗链，在云存储上给图片设置了防盗链，只给本人的博客域名应用。而小程序是通过 API 接口和前端的交互，申请图片的 Referer 不是你的 WordPress 站点，天然不显示了。
所以解决办法有两个，最简略的就是敞开防盗链，如何想要设置避免其余站点盗链咱们的图片，又要能给本人的小程序应用，那么怎么办呢？
通过我的钻研，微信小程序展现的图片的 Referer 是空或者 https://servicewechat.com，所以咱们只有在 veImageX 的防盗链设置中开启「空 Referer」，并加上 https://servicewechat.com 即可。
火山引擎 veImageX 的防盗链设置有点深，首先抉择要设置的服务，点击「根底配置」，而后再「域名信息」中要设置的 CDN 域名，点击「配置」，最初编辑「防盗链」设置：
类型抉择「referer 白名单」，蕴含空 referer 开启，规定：输出域名和servicewechat.com，留神 veImageX 应用 ; 宰割多个域名。
9. 为什么网站上的小图标显示成空方格？
首先阐明一下，这些小图标不是图片，而是图标字体，所以这是因为以后 WordPress 的主题是应用了字体图标，而字体因为造成的 CORS 资源跨域问题。
WPJAM Basic 对动态资源进行 CDN 减速之后，如果 CSS 外面应用了一些字体文件，字体文件也会镜像到 veImageX，这时关上浏览器的开发者核心，在控制台可能就会呈现上面的错误信息：No ‘Access-Control-Allow-Origin’ header is present on the requested resource。
这是跨域资源共享 (CORS) 机制造成的，该机制应用附加的 HTTP 头来通知浏览器，是否容许运行在一个源上的 Web 利用拜访位于另一不同源的资源，当一个 Web 利用发动一个与本身所在源（域，协定和端口）不同的 HTTP 申请时，它发动这个 HTTP 申请的即 跨源 HTTP 申请 。
晓得什么问题就晓得怎么去解决了，最简略的就是不要镜像 CSS 文件，这样就不会镜像字体文件，就不会有跨域的问题，如果还是心愿动态文件都呢个 CDN 减速，那么只需设置一下字体文件容许跨域拜访。
在 veImageX 抉择要设置的服务，点击「根底配置」，而后再「域名信息」中要设置的 CDN 域名，点击「配置」，最初编辑「HTTP Header 配置」设置，增加一条规定即可：
这就是 WordPress 博客应用火山引擎 veImageX 进行动态资源 CDN 的齐全指南，蕴含了背地原理，应用教程，迁徙教程，常见问题四个大方面，心愿可能帮到你。😁
最初心愿大家都有疾速的网站，和我一样。如果对你有帮忙也欢送珍藏本文，点击在看，让更多的敌人也能够有更快的网站。😀
下载：WPJAM Basic 插件
注册：火山引擎 veImageX
