魔改笔记六:博客加速
魔改笔记六:博客加速(本文转载)
0x00 前言
这几天闲来无事,学习了下Hexo的博客速度优化,发现有好多方法。CDN加速、Coding部署、gulp压缩、hexo-neat、InstantClick 黑科技等等。这里记录下我使用gulp压缩进行Hexo速度优化和在此过程中遇到的问题,以及使用hexo-neat对Hexo进行速度优化。
这两种方法都是静态文件压缩,静态文件包括: html,css,js,images
0x01 优化之前
在博客速度优化之前,先来说说在浏览器输入url到页面打开,都做了些什么?,因为没怎么了解过,所以参考了很多博客,具体参考的博客链接在文末。
当在浏览器地址栏输入网址,如:www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢?这个过程可以大致分为两个部分:网络通信和页面渲染。
1、大致流程
URL 解析->DNS 查询->TCP 连接->处理请求->接受响应->渲染页面
简单的来说,就是:
浏览器里输入网址
浏览器查找域名对应的IP地址
DNS具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->根域名服务器
浏览器向web服务器发送一个HTTP请求
服务器的永久重定向响应(从http://baidu.com 到 http://www.baidu.com)
为什么要重定向?其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址,就像http://baidu.com/和http://www.baidu.com/,搜索引擎会认为它们是两个网站,结果造成每一个的搜索链接都减少从而降低排名。所以要把带www的和不带www的地址归到同一个网站排名下。还有一个原因是用不同的地址会造成缓存友好性变差。
浏览器跟踪重定向地址,发起GET请求
服务器”处理”请求,向浏览器发回一个HTML响应
浏览器解析显示HTML
浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
浏览器发送异步请求(ajax请求等)
2、简单分析
从上面的过程可以看出,大部分过程我们无法控制,所以只能从浏览器端入手来找一些可以做的事情。
少发送请求
把要加载的js文件(css文件同理)合并成一个(尽量少)文件,则可以向服务器少发送请求,从而减少等待时间。
压缩文件
使用压缩之后的js、css、img文件,同样可以减少请求时间。
Css Sprite
这是css的一项技术,将图片尽可能多的合并成一个图片文件,第一次使用的时候加载这张图片,然后浏览器会缓存下来,其他地方再使用的时候就不需要重新请求了。
js/css位置
css引用建议放在head标签里面;js脚本建议放到body内容的最后,原因:等待js加载或者脚本有错误的时候不会影响html页面的展示。
那么怎么提高hexo这个静态博客的页面加载速度呢?可以从以下的几个方面去入手:
将js文件尽可能放到body的闭合标签之前,因为在加载或者引入js文件时是阻塞式的,如果在页面的最开始就引入这些js文件,而这些文件又比较大,会造成页面在渲染时长时间处于白屏状态。
尽量避免去引用访问速度非常低下的cdn或者图片,可改用访问速度更快的cdn,或将难以迅速加载的图片保存到自己的站点目录下,以免在加载图片时耗费大量时间,最后还加载失败。
对页面的静态资源进行压缩,包括css、js和html等文件。
我们自己添加的css和js文件为了可读性,往往会有很多换行和空格,这些对于浏览器来说并没什么用,甚至还会降低渲染页面的速度。
至于html文件,由于Markdown转成html的bug,会导致页面存在大量的空白,查看下页面的源代码,会发现有大量的空白符,这也会造成页面渲染的性能问题。
0x02 gulp4压缩静态文件
1、安装gulp
在站点根目录下安装gulp工具
1 | npm install gulp -g |
2.安装gulp插件
1 | npm install gulp-minify-html gulp-minify-css gulp-uglify gulp-imagemin --save |
1 | # 解决【Gulp打包问题】 GulpUglifyError: unable to minify JavaScript |
2、建立gulpfile.js文件
在站点根目录下创建gulpfile.js
1 | var gulp = require('gulp'); |
注:
1.修改上面的各个目录为你的真实目录, ** 代表0或多个子目录
2.在默认任务中,gulp.parallel()是gulp4中的新写法:
gulp.series 用于串行(顺序)执行
gulp.parallel 用于并行执行
3.部署执行
1 | hexo clean && hexo g && gulp && hexo d |
感觉命令有点多,也可以直接在package.json
文件里添加
1 | "scripts": { |
3、遇到的问题
在使用gup4压缩静态文件时遇到一些问题,总结一下:
1.gulp4的默认任务执行问题
1 | //4.0以前的写法 |
2.TypeError: dest.on is not a function
先检查gulpfile.js若没有问题,删掉node_modules,重装一遍依赖npm install
3.GulpUglifyError: unable to minify JavaScript(Gulp打包问题)
错误原因有很多,如:有的文件不能打包、javascirpt语法问题等等。我遇到的问题是有的文件不能打包。
(1)解决方法1:
检查哪一个文件中的哪一行有问题,安装 gulp-util 模块 用于打印日志
1 | npm install --save-dev gulp-util |
在gulpfile.js
里添加:
1 | gulp.task('script', function() { |
执行gulp script
,这样就可以精准的逐个排查文件了。这里我排查到:
发现blog-encrypt.js
有问题,在gulpfile.js
忽略blog-encrypt.js
即可,即
1 | // 压缩 public/js 目录 js文件 |
(2)解决方法2:
继续方法1 安装 babel 模块gulp-babel
、babel-preset-es2015
1 | npm install --save-dev gulp-babel babel-preset-es2015 |
1 |
|
这样就解决 gulp-uglify 压缩JavaScript 不兼容 es5 语法的问题了。
4.The following tasks did not complete: html Did you forget to signal async completion?
运行gulp,出现下面报错:
1 | The following tasks did not complete: html |
解决办法:在注册的任务函数里使用 async 和 await。
1 | gulp.task("html",async()=>{ |
gulp4安装使用过程中,我暂时就遇到上面这几种错误。除了上述错误,还有很多可能会出错的地方,这里有个博客记录了一些:gulp 错误集锦
0x03 hexo-neat压缩静态文件
hexo-neat是由rozbo大佬开发的压缩插件,配置简单,无需额外命令,只要使用原本的调试三连或者部署三连就可以自动完成静态资源的压缩
1、安装hexo-neat
在站点根目录下
1 | npm install hexo-neat --save |
2、添加相关配置
在站点配置文件_config.yml
添加相关配置,直接添加到站点配置文件_config.yml
的末尾就可以。可以安装自己的需求去自定义配置,不过有些注意事项
1 | # hexo-neat |
3、hexo-neat插件注意事项
在使用hexo-neat插件时,可以在命令窗口中看到各个文件的压缩率,于是可以通过跳过一些文件让效率更高。
1.跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude,会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。于是需要给这些文件指定正确的路径,万能的配置方式如下:
1 | neat_css: |
2.压缩html时不要跳过.md文件和.swig文件
.md文件就是markdown文件,如果跳过压缩.md文件,而又刚好在文章中使用到了tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。
.swig文件是模板引擎文件,也就是hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。
hexo-offline-popup插件(加速你博客的访问速度
为了您的最佳浏览体验,建议打开原网址浏览哦
本文链接:https://colsrch.cn/posts/32c8ba21/
hexo-offline-popup
hexo-offline-popup 是一个 hexo 插件, 它可加速你的Hexo网站的加载速度,以及网站内容更新弹窗提示。
安装
在Hexo根目录打开Git-bash
,执行命令
1 | npm i hexo-offline-popup --save |
配置
在博客根目录的_config.yml
中添加如下配置
1 | # offline config passed to sw-precache. |
如果你有CDN资源,例:
1 | - https://unpkg.com/artitalk |
将此配置添加到根目录的_config.yml
1 | service_worker: |
上传
执行该代码激活并使用
1 | hexo cl && hexo g -d |
演示
由于该弹窗仅在博客更新时会弹出,因此留了一个弹窗演示站
弹窗演示站:https://pfc049.coding-pages.com/
FAQ
安装后未弹窗
该插件仅部署后生效,本地运行不生效
安装该插件后第一次打开网站不弹窗,后续更新将会弹窗
插件地址:hexo-offline-popup
版权声明:本网站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Colsrch’Blog
原文链接1:https://blog.csdn.net/qq_43625917/article/details/104136304
原文链接2:https://blog.csdn.net/qq_42830477/article/details/107296226