对本站进行的一系列优化

首先将站点搬到国内服务器，弃用各种不必要的统计并精简和删除不必要的资源。

2020-11-30 更新，针对性加载网页所需资源。

使用Yarn包管理器

Yarn会并行执行安装包所以速度要快很多，以及其拥有的离线模式更是显著提高安装下载的速度。

安装Yarn

npm install yarn -g

删除原 node_modules 再重新安装

rm -rf node_modules
yarn

Yarn安装全部依赖

yarn
#或者
yarn install

切换为淘宝源

yarn config set registry https://registry.npm.taobao.org

使用方法见: https://yarn.bootcss.com/docs/usage

代码压缩

代码压缩使用的是hexo-neat插件，其配置使用简单。
安装：

yarn add hexo-neat

博客根目录下做如下配置

# hexo-neat
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
# 压缩 css
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
    - '**/*.css.map'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'

图片压缩

统一全站图片格式，本站全部使用 .webp 格式图片。

使用图片压缩工具，我使用的是 【Imagine】客户端，其也支持各格式间的转换。

注: .jpg转换为 .png 格式需要安装 ImageMagick，且 .jpg 转 .png 在保证清晰度情况下由于色彩丰富度增加一般图片大小会相应变大。

也有其他图片压缩网站或工具，比如【I love IMG】、【TinyPNG】以及【ImgBot】等。

图片缓存

使用 hexo-image-cloudflare 插件，其利用【images.weserv.nl】把博客所有图片缓存到 Cloudfare上。

具体见： https://github.com/njzjz/hexo-image-cloudflare

优化第三方资源加载

字体资源、Jquery、图标CSS等第三方资源使用【BootCDN】或者【jsdelivr】等公共CDN的引用地址，并适当启用预加载或者异步加载。

使用预加载

使用【instant.page】开启页面预加载

Make your site’s pages instant in 1 minute and improve your conversion rate by 1%！

使用方法：
直接将此 HTML 片段放在</body>之前即可。

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

或者自托管

<script src="路径/js/instantpage.js" type="module"></script>

注意:

使用 Instant.page会显著增加自己的站点的 PV 以及请求量，对于使用CDN全站加速的小伙伴需要着重注意，因为CDN的请求数也是要收费的。

针对性引入第三方资源

摒弃全局引入所有第三方资源，只在所需页面才做引入，以减少页面不必要的资源请求。
全局layout.ejs仅引入 字体CSS、预加载JS和 点击爱心JS

<body>
  <!-- 其他代码 -->
  <!-- Noto Serif SC && Anonymous Pro -->
  <link type="text/css" rel="preload stylesheet" as="style" href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" crossorigin >

  <!-- 预加载 -->
  <script type="text/javascript" aysnc src="/js/instantpage.js" type="module"></script>

  <!-- 页面点击小爱心 -->
  <script type="text/javascript" defer src="/js/clicklove.js"></script>

</body>

仅在文章页面需要引入 图标CSS、Jquery和 代码复制功能相关JS

在article.ejs文件底部引入

<article>
  <div>
    <!-- 其他代码 --> 
  </div>

  <!-- fortawesome CSS -->
  <link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
  <link type='text/css' rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

  <!-- 引入jquery -->
  <script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <!-- 代码块复制功能 -->
  <script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/clipboard@1.7.1/dist/clipboard.js" ></script>
  <script type="text/javascript" defer src="/js/clipboard_use.js"></script>

</article>

首页图标所需样式与文章所需样式冲突，也针对性引入。

首页图标样式，在home.ejs中引入：

<div class="content-home text-center">
  <!-- 其他代码 -->

  <!-- fortawesome CSS -->
  <link type="text/css" rel="preload stylesheet" as="style" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.css">
</div>

其他方法

使用对象存储以及开启全站CDN等。

在此暂时不做考虑，等续不起服务器再说！

本文作者： Senorui

本文链接： https://senorui.top/posts/6bcd.html