Site updated: 2023-07-01 13:57:48
This commit is contained in:
qinglong committed
1 parent
3d7c209700
commit
6920aad390
169 files changed
+175
-173
No files matched your search
@@ -11,7 +11,7 @@
|
||||
"url": "https://hitoli.com/2023/07/01/shoka%E4%B8%BB%E9%A2%98%E9%80%9F%E5%BA%A6%E4%BC%98%E5%8C%96-%E6%8B%86%E5%88%86jsdelivr/",
|
||||
"title": "shoka主题速度优化-拆分jsdelivr",
|
||||
"date_published": "2023-06-30T17:15:00.000Z",
|
||||
"content_html": "<h4 id=\"前言\"><a class=\"anchor\" href=\"#前言\">#</a> 前言</h4>\n<div class=\"note primary该篇文章介绍了如何对shoka主题进行jsdelivr聚合拆分，以便使用国内镜像源和异步加载，从而优化网站速度。具体操作包括更改模板、注册helper和更改配置。其中，推荐使用advVendors配置，可自定义加载源和js文件名，同时支持异步加载、pjax刷新和integrity防XXS等特性。\">\n</div>\n<p>众所周知，jsdelivr 在国内的速度可以用慢的一批来形容<br />\n而 shoka 主题使用了 jsdelivr 的 combine 功能加载第三方 js, 而 combine 在国内没有镜像源<br />\n并且阻断了使用 CDN 并发加速的道路，本篇博文会将 jsdelivr 聚合拆分为几个独立的 js, 以便使用国内镜像源和异步加载。</p>\n<div class=\"note info\">\n<p>此方案相较于本地化而言有较大速度优势，尤其在 CDN 并发加持下</p>\n</div>\n<h4 id=\"拆分-jsdelivr\"><a class=\"anchor\" href=\"#拆分-jsdelivr\">#</a> 拆分 jsdelivr</h4>\n<ol>\n<li>更改模板</li>\n</ol>\n<p>打开 <span class=\"red\">shoka\\layout_partials\\layout.njk</span>，找到第 144 行左右:</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://cdn.polyfill.io/v3/polyfill.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>{{ _vendor_js<span class=\"token entity\" title=\"(\">&#40;</span><span class=\"token entity\" title=\")\">&#41;</span> }}</pre></td></tr><tr><td data-num=\"3\"></td><td><pre>{{ _js<span class=\"token entity\" title=\"(\">&#40;</span>'app.js'<span class=\"token entity\" title=\")\">&#41;</span> }}</pre></td></tr><tr><td data-num=\"4\"></td><td><pre>{{ partial<span class=\"token entity\" title=\"(\">&#40;</span>'_partials/third-party/baidu-analytics.njk', {}, {cache: true}<span class=\"token entity\" title=\")\">&#41;</span> }}</pre></td></tr></table></figure><p>更改为如下内容:</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://cdn.polyfill.io/v3/polyfill.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token comment\"></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre>{{ _vendor_js() }}</pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token comment\"></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>{{ _js('app.js')}}</pre></td></tr><tr><td data-num=\"8\"></td><td><pre>{{ partial('_partials/third-party/baidu-analytics.njk', {}, {cache: true}) }}</pre></td></tr></table></figure><ol start=\"2\">\n<li>注册 helper</li>\n</ol>\n<p>打开 <span class=\"red\">shoka\\scripts\\helpers\\asset.js</span>, 最后一行新建空行，增加如下内容:</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>hexo<span class=\"token punctuation\">.</span>extend<span class=\"token punctuation\">.</span>helper<span class=\"token punctuation\">.</span><span class=\"token function\">register</span><span class=\"token punctuation\">(</span><span class=\"token string\">'_list_vendor_js'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token keyword\">return</span> hexo<span class=\"token punctuation\">.</span>themeLine truncated
|
||||
"content_html": "<h4 id=\"前言\"><a class=\"anchor\" href=\"#前言\">#</a> 前言</h4>\n<div class=\"note primary\">\n<p>该篇文章介绍了如何对 shoka 主题进行 jsdelivr 聚合拆分，以便使用国内镜像源和异步加载，从而优化网站速度。具体操作包括更改模板、注册 helper 和更改配置。其中，推荐使用 advVendors 配置，可自定义加载源和 js 文件名，同时支持异步加载、pjax 刷新和 integrity 防 XXS 等特性。</p>\n</div>\n<p>众所周知，jsdelivr 在国内的速度可以用慢的一批来形容<br />\n而 shoka 主题使用了 jsdelivr 的 combine 功能加载第三方 js, 而 combine 在国内没有镜像源<br />\n并且阻断了使用 CDN 并发加速的道路，本篇博文会将 jsdelivr 聚合拆分为几个独立的 js, 以便使用国内镜像源和异步加载。</p>\n<div class=\"note info\">\n<p>此方案相较于本地化而言有较大速度优势，尤其在 CDN 并发加持下</p>\n</div>\n<h4 id=\"拆分-jsdelivr\"><a class=\"anchor\" href=\"#拆分-jsdelivr\">#</a> 拆分 jsdelivr</h4>\n<ol>\n<li>更改模板</li>\n</ol>\n<p>打开 <span class=\"red\">shoka\\layout_partials\\layout.njk</span>，找到第 144 行左右:</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://cdn.polyfill.io/v3/polyfill.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre>{{ _vendor_js() }}</pre></td></tr><tr><td data-num=\"3\"></td><td><pre>{{ _js('app.js') }}</pre></td></tr><tr><td data-num=\"4\"></td><td><pre>{{ partial('_partials/third-party/baidu-analytics.njk', {}, {cache: true}) }}</pre></td></tr></table></figure><p>更改为如下内容:</p>\n<figure class=\"highlight html\"><figcaption data-lang=\"HTML\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>https://cdn.polyfill.io/v3/polyfill.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre><span class=\"token comment\"></span></pre></td></tr><tr><td data-num=\"5\"></td><td><pre>{{ _vendor_js() }}</pre></td></tr><tr><td data-num=\"6\"></td><td><pre><span class=\"token comment\"></span></pre></td></tr><tr><td data-num=\"7\"></td><td><pre>{{ _js('app.js')}}</pre></td></tr><tr><td data-num=\"8\"></td><td><pre>{{ partial('_partials/third-party/baidu-analytics.njk', {}, {cache: true}) }}</pre></td></tr></table></figure><ol start=\"2\">\n<li>注册 helper</li>\n</ol>\n<p>打开 <span class=\"red\">shoka\\scripts\\helpers\\asset.js</span>, 最后一行新建空行，增加如下内容:</p>\n<figure class=\"highlight javascript\"><figcaption data-lang=\"javascript\"></figcaption><table><tr><td data-num=\"1\"></td><td><pre>hexo<span class=\"token punctuation\">.</span>extend<span class=\"token punctuation\">.</span>helper<span class=\"token punctuation\">.</span><span class=\"token function\">register</span><span class=\"token punctuation\">(</span><span class=\"token string\">'_list_vendor_js'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span></pre></td></tr><tr><td data-num=\"2\"></td><td><pre> <span class=\"token keyword\">return</span> hexo<span class=\"token punctuation\">.</span>theme<span class=\"token punctuation\">.</span>config<span class=\"token punctuation\">.</span>vendorsList<span class=\"token punctuation\">.</span>js<span class=\"token punctuation\">;</span></pre></td></tr><tr><td data-num=\"3\"></td><td><pre><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span cLine truncated
|
||||
"tags": [
|
||||
"极空间",
|
||||
"Docker",
|
||||
|
||||
Reference in new issue
Block a user