Hexo-neat插件优化提升访问效率

一、neat插件简介

对于任何一个网站来说,优化页面的访问速度是必须的,个人来说,只要加载页面十秒以上或长时间处于空白或加载状态,我会立刻关掉此页面的。你又能容忍几秒呢?

问:那么怎么提高hexo这个静态博客的页面加载速度呢?

答: 可以从以下的几个方面去入手:

  1. 将js渲染文件尽可能放置到(</body>之前),因为html页面是自上而下(阻塞式)加载的,如果放在(</header>前)会渲染完页面再显示内容,渲染画面是很费时的。
  2. 尽量避免去引用访问速度非常低下的cdn或者图片,可以改用访问速度更快的cdn,或者将难以迅速加载的图片保存到自己的站点目录下,以免在加载图片时耗费了大量的时间,最后还加载不出来。

    Github配置cdn私人picGo图床教程

  3. 对页面的静态资源进行压缩,包括css、js和html等文件。我们自己添加的css和js文件为了可读性,往往会有很多换行和空格,这些对于浏览器来无用,甚至还会降低渲染页面的速度。至于html文件,由于Markdown转成html的bug,会导致页面存在大量的空白,如果你查看下页面的源代码,就会发现这些大量的空白符,十分难看。这也会造成页面渲染的性能问题。
    在这里插入图片描述

二、使用教程

  1. 安装插件

    npm install hexo-neat --save
    
  2. 主配置_config.yml文末添加:(其中exclude板块是特别添加,针对你的静态资源进行筛选,筛选规则见下文易错配置)

    # hexo-neat
    # md博文压缩
    neat_enable: true
    # 压缩html(ejs,swig等也属于html格式片段)
    neat_html:
      enable: true
      exclude:
    # 压缩css  
    neat_css:
      enable: true
      exclude:
        - '*.min.css'
        - '**/*.min.css'
        - 'jquery.fancybox.min.css'
        - '**/live2d-widget/waifu.css'
    # 压缩js
    neat_js:
      enable: true
      mangle: true #打印日志
      output:
      compress:
      exclude: #排除文件
        - '*.min.js'
        - '**/*.min.js'
        - 'jquery.fancybox.min.js'
        - '**/live2d-widget/*.js'
        - '**/live2d-widget/*.min.js'
    
  3. 运行(因为mangle: true #打印日志,我们能看到运行流程)
    在这里插入图片描述
    【INFO neat the html:xxxx.md】先压缩md文件的换行和空白

    注意md中不要带特殊标签<>的颜表情<( ̄ˇ ̄)/、<(ˉ^ˉ)>等,因为压缩转换为html后会变成<div >< ( ̄ˇ ̄)/</div>,转义失败!!!
    问:我是怎么发现的呢?
    在这里插入图片描述
    答:这在sakura主题中,原作者的source\links\index.md中就用了颜文字<( ̄︶ ̄),微微一笑,挖坑,这里补坑了啊。

    在这里插入图片描述
    【INFO neat the html: xxxx.ejs】压缩ejs配置文件(这里也有很多换行和空格),这是html片段格式文件。
    在这里插入图片描述
    如果配置了RSS订阅,这里还会atom.xml生成;本文里它无关紧要了。
    现在是neat工作最重要的部分之一:压缩js和css。
    这一部分最重要,因为sakura主题作者留了几个坑,不同引入js也需要灵活的设置exclude。
    在这里插入图片描述
    最后是(hexo generate)将md文章转换成html语言格式的过程。

三、灵活exclude配置(易错)

  1. md压缩、html压缩

  2. 已经压缩过的css和js不用压缩:剔除exclude(*.min.css* .min.js

  3. 特殊名字xx.xx.min.js的需要单独列出来(这里引用了fancybox图片弹窗效果,从压缩名单里单独剔除)
    在这里插入图片描述

  4. 深目录的,需要单独列出来:(这里我引用了live2d看板娘的动画)
    单用**/*.min.js深目录跳过已压缩文件不行,这部分只好全部跳过压缩了:
    在这里插入图片描述

  5. 如果你和我一样用的sakura主题,那么在themes\sakura\layout\_partial\aplayer.ejs中,在34和35行中间添加一个>反括号。

    <meting-js
    <% for (i in theme.aplayer) {%>
        <%- i %>="<%- theme.aplayer[i] %>"
    <% } %>
    >
    </meting-js>
    

    说明一下,这是aplayer音乐的标签
    <meting-js i ="aplayer[i] "> </meting-js>
    一共有i项歌单,循环打印歌单信息,对,sakura原作者忘记加</meting-js>前的反括号了。在这里插入图片描述
    不加报错如下:
    在这里插入图片描述
    大概就是这样啦,在日志里找找错误的点,修改一下就好了。现在压缩后的页面加载速度起飞了呢。~
    在这里插入图片描述

发布了215 篇原创文章 · 获赞 385 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/cungudafa/article/details/104327497