该广告由百度联盟提供,不代表本站立场。

一、neat插件简介

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

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

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

将js渲染文件尽可能放置到(之前),因为html页面是自上而下(阻塞式)加载的,如果放在(前)会渲染完页面再显示内容,渲染画面是很费时的。

1,尽量避免去引用访问速度非常低下的cdn或者图片,可以改用访问速度更快的cdn,或者将难以迅速加载的图片保存到自己的站点目录下,以免在加载图片时耗费了大量的时间,最后还加载不出来。

2,Github配置cdn和私人picGo图床教程



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

二、使用教程

安装插件

npm install hexo-neat --save

主配置_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'

运行(因为mangle: true #打印日志,我们能看到运行流程)

【INFO neat the html:xxxx.md】先压缩md文件的换行和空白

注意md中不要带特殊标签<>的颜表情<( ̄ˇ ̄)/、<(ˉ^ˉ)>等,因为压缩转换为html后会变成

< ( ̄ˇ ̄)/
,转义失败!!!
问:我是怎么发现的呢?

答:这在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原作者忘记加前的反括号了。

不加就会报错,如下

大概就是这样啦,在日志里找找错误的点,修改一下就好了。现在压缩后的页面加载速度起飞了呢。~

该广告由百度联盟提供,不代表本站立场。
64位Linux系统 API数据分析 Android应用市场 Android开发 Android电视盒子 Android签名证书生成 Apk上架应用商店 Aplayer报错解决方案 Aplayer播放器 App Store CDN DSDT Django Excel FM发射器 Git GitHub GitHub page Github Git用户名邮箱修改 Google Analytics Google Play Google/Baidu search Google插件 H5与CSS3 HBuilder HBuilder打包APP HBuilder打包ipa Hexo Hexo-neat插件 Homebrew Cask JavaScript学习笔记 Linux常见命令 MySQL数据库 Python Python爬虫 SEO优化 Videoscribe Vue Vue电商 Windows10 api接口搭建 console css特效 git clone 速度过慢 hexo hexo-admin插件 hexo-sakura主题 hexo-tag-aplayer插件 hexo主题 hexo博客美化 homebrew iOS iOS开发 js用法、范例 koolshare live2d看板动画 node.js npm 安装踩过的坑 oc引导 openwrt软路由系统 python qlv视频下载 robots.txt valine评论 win10 wx-server-sdk 个人主页 个人开发者 中国移动魔百盒 中文免费版 中文破解版 云函数 优化访问速度 傻瓜EXE 全球加速 博客 又拍云 反编译 和风天气 国内CODing托管 图床 域名加速 学习笔记 宝塔 实践项目 小技巧 小程序开发 开源小游戏 微信公众号 微信小程序 微信小程序开发 微擎 必应每日一图 抖音小程序 教程 数据可视化 本地打包iOS包 机械革命 树莓派 树莓派4b 爱奇艺下载器 电池补丁 百度云cdn 百度地图api 百度搜索 百度收录 百度权重 百度统计 突发奇想 站点地图 笔记 腾讯广告 腾讯视频 腾讯视频下载 自制小玩意儿 访问者地图 谷歌Adsense 软路由 静态数据库 面试题 黑苹果

等待也是约会的一部分嘛