首页 > 其他分享 >Hexo博客Next主题配置加载优化性能提升

Hexo博客Next主题配置加载优化性能提升

时间:2023-04-14 14:05:27浏览次数:41  
标签:Hexo hexo 压缩 js neat Next true 加载


主题源加载优化

把在NexT主题的_config.yml里面的:

# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:

改为:

# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host: //fonts.lug.ustc.edu.cn

因为fonts.lug.ustc.edu.cn是中科大的源,相比之前能快一下


博客双线部署

参考文章地址


压缩网页静态资源

参考文章地址hexo-neat插件github地址

常规的做法是使用gulp来进行压缩,每次压缩时还需要输入额外的命令,比较繁琐

配置hexo-neat压缩插件

在站点根目录下安装hexo-neat

博客目录下运行

npm install hexo-neat --save

如果报错,选择克隆插件,然后手动复制到插件目录里面hexo目录\node_modules\

git clone https://github.com/rozbo/hexo-neat

站点配置文件添加相关配置

配置信息添加到博客目录文件夹下的hexo目录\_config.yml的末尾,可以安装自己的需求去自定义配置

# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
  enable: true
  exclude:
# 压缩css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

报错及相应解决

参考文章地址

1、跳过压缩文件的正确配置方式

如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:

neat_css:
enable: true
exclude:
	- '**/*.min.css'

2、压缩html时不要跳过.md文件

.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。

3、压缩html时不要跳过.swig文件

.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

4、点击的桃心效果消失

# 压缩js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'  
    - '**/love.js'

gitalk js文件报错
在上面的代码底部加入如下代码

- '**/comments.gitalk.js'

5、jquery pjax min js报错

我这里的 jquery pjax min js是指的加入pjax前需要以来的两个cdn文件,一个是jq,一个是它,我将它下载到了本地,不要在意这些细节~
同样加入如下代码

- '**/jquery_pjax_min_js.js'

图片懒加载

参考文章地址

懒加载,在需要的时候才加载图片,而不是一次性加载完整个页面的图片
使用lazyload插件,适用于本地图片很多的情况

配置

Hexo博客目录下,执行以下命令:

npm install hexo-lazyload --save

然后在你的 Hexo目录的配置文件 _config.yml 中添加配置:

lazyload:
  enable: true
  # className: #可选 e.g. .J-lazyload-img
  # loadingImg: #可选 eg. ./images/loading.png

参数:
loadingImg - 图片未加载时的代替图

默认路径: /js/lazyload-plugin/loading.svg 如果需要自定义,添填入 loading 图片地址,如果是本地图片,不要忘记把图片添加到你的主题目录下。

className - 需要延迟加载的图片 class选择器

默认会延迟加载文章中的所有图片。
如果不为空,请填入需要延迟加载的图片class 选择器



我的简书文章地址,欢迎访问我的GitHub主页,欢迎访问


标签:Hexo,hexo,压缩,js,neat,Next,true,加载
From: https://blog.51cto.com/u_16066155/6190024

相关文章

  • Hexo博客Next主题站内搜索模块相关,解决搜索无效、一直loading的问题
    站内搜索配置设置方法:首先安装hexo-generator-searchdb插件npminstallhexo-generator-searchdb--save编辑博客根目录下的博客本地目录/_config.yml站点配置文件,新增以下内容到任意位置,search顶格放否则可能没效果:search:path:search.xmlfield:postformat:htmlli......
  • Hexo博客使用valine评论系统无效果及终极解决方案
    注意事项有一些博主valine评论系统无效果,有一些原因:1、很大程度是因为next的版本升级导致某些参数设置不同2、valine评论是基于LeanCloud,还有一个文章阅读次数功能也是用LeanCloud,两者会有一点冲突之后会给出一些解决方案评论系统选择Hexo可用的评论系统有很多,如下:来必力:https://l......
  • electron加载远程和本地右键菜单冲突问题处理
    electron加载远程页面,远程页面有自己的右键,但是electron也有自己的菜单,为了防止两个右键菜单同时显示,使用window.myrightmenu进行限制,window.myrightmenu非空则显示远程的,window.myrightmenu为空则显示electron的默认菜单。下面是远程界面代码://右键rightClick(ro......
  • jvm 类加载
    将字节码文件加载到jvm,并创建对应的字节码对象,然后对其进行验证、初始化等操作共5个阶段:加载、验证、准备、解析、初始化,这里只记录【加载】里的类加载器和双亲委派加载的是字节码文件通过类加载器ClassLoader把字节码文件在堆中生成代表这个class文件的java.lang.Clas......
  • 【异步加载JS脚本(script标签)至html文档中】的辅助函数
    Code:/***'asyncLoadScript'方法的配置项'options'的类型定义*@typedef{Object}IOptions*@prop{string}id-script标签的ID*@prop{Function}onSucceed-加载成功后的回调*@prop{(Function|undefined)}onFailed-加载失败后的回调*@prop{boolean}s......
  • 取消加载项提升Office软件打开速度的方法
      本文介绍基于修改加载项,解决MicrosoftOffice系列软件开启速度较慢的办法。  最近,发现Excel软件的打开速度越来越慢,会在一定程度上影响工作效率。因此尝试对此加以解决。其中,本文所给方法对于Word/Excel/PPT文件均适用。但请注意,本文所给出的解决方法仅对由于加载项过多造成......
  • 手机直播源码,JS实现页面下拉加载数据操作
    手机直播源码,JS实现页面下拉加载数据操作主要是在id="ph"的div内加载数据: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml&qu......
  • Cesium如何加载PBS发布的WMTS服务
    Cesium加载Geoserver发布的WMTS服务,url示例:'http://localhost:8080/geoserver/gwc/service/wmts/rest/nurc:mosaic/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',而PBS(PortableBasemapServer)发布的地址是这样:http://192.168.58.1:7080/PBS/re......
  • 懒加载@Lazy
    默认情况下,Spring在程序启动时创建所有通过注解声明或者xml注解的单例bean,这样做好处是在启动时即可以检测所有可能的错误,而不是在运行的时候。但是有些情况我们需要的时候创建一个bean,而不是在程序启动的时候,此时需要用到@Lazy来进行懒加载。懒加载主要针对单例bean,仅当第一次使......
  • vue路由懒加载
    vue路由懒加载是性能优化考虑的一种策略。假如在router内需要引入一个component文件,importPrevCompfrom'./components/prev-comp'importNextCompfrom'./components/next-comp'这是常规的文件引入方式,这种方式下有用到和没有用到的文件都会被引入,增加资源加载性能消耗......