Hexo+Coding搭建自己的博客網(wǎng)站系列4-加速Hexo博客
Fitz?前言
歡迎瀏覽我的博客：
https://fitz1318.top 當(dāng)我們創(chuàng)建好Hexo博客后，加載速度問題就需要被重視，在本文中提出了兩種不同的加速方案，可以相互補(bǔ)充，讓你的博客快如閃電。在這里要感謝reuixy：
https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html 本文還參考了這篇文章
https://blog.csdn.net/java_1996/article/details/86499625加速方案一：利用gulp 4.0實(shí)現(xiàn)靜態(tài)資源壓縮
gulp簡介
gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。 gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 它能自動(dòng)化地完成 前端代碼的測試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。 在這里我們主要使用壓縮功能
插件安裝
在站點(diǎn)根目錄下使用Git bash 鍵入命令npm install gulp
鍵入命令npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save安裝這些功能模塊
3. 創(chuàng)建任務(wù) 在站點(diǎn)根目錄下新建gulpfile.js文件
var gulp = require('gulp');//Plugins模塊獲取var minifycss = require('gulp-minify-css');var uglify = require('gulp-uglify');var htmlmin = require('gulp-htmlmin');var htmlclean = require('gulp-htmlclean');//壓縮cssgulp.task('minify-css', function () {return gulp.src('./public/**/*.css').pipe(minifycss()).pipe(gulp.dest('./public'));});//壓縮htmlgulp.task('minify-html', function () {return gulp.src('./public/**/*.html').pipe(htmlclean()).pipe(htmlmin({removeComments: true,minifyJS: true,minifyCSS: true,minifyURLs: true,})).pipe(gulp.dest('./public'))});//壓縮js 不壓縮min.jsgulp.task('minify-js', function () {return gulp.src(['./public/**/*.js', '!./public/**/*.min.js']).pipe(uglify()).pipe(gulp.dest('./public'));});//4.0以前的寫法//gulp.task('default', [ // 'minify-html', 'minify-css', 'minify-js'//]);//4.0以后的寫法// 執(zhí)行 gulp 命令時(shí)執(zhí)行的任務(wù)gulp.task('default', gulp.parallel('minify-html', 'minify-css', function() { // Do something after a, b, and c are finished.}));
我在這里遇到ES6和ES5沖突問題，所以沒壓縮js
使用 hexo clean && hexo g && gulp，然后再本地測試：hexo s或者部署：hexo d
加速方案二：InstantClick+hexo-service-worker+hexo-filter-optimize
instantclick簡單介紹
在訪問者點(diǎn)擊一個(gè)鏈接之前，鼠標(biāo)會懸停在鏈接上面，這兩個(gè)事件之間通常有200ms~300ms的間隔，InstantClick 利用這個(gè)時(shí)間間隔預(yù)加載頁面。這樣當(dāng)你點(diǎn)擊頁面的時(shí)候，其實(shí)頁面已經(jīng)加載到本地了，呈現(xiàn)當(dāng)然也就會很快。
instancklkick使用
①去github上下載最新版instancklkick.js地址為
https://github.com/dieulot/instantclick/tree/master/src，或者從我的百度云盤下載：鏈接：
https://pan.baidu.com/s/1KY3oNuYarOxVmvp3-BeI9g 提取碼：cp8w ②然后保存在~/blog/themes/next/source/js/src/下，并在~/blog/themes/next/layout/_layout.swig里添加代碼
+ <script type="text/javascript" src= "/js/src/instantclick.js" data-no-instant></script>+ <script data-no-instant>InstantClick.init();</script></body></html>
相信你知道這是什么意思，怎么添加。 去除頂部加載條：在~/blog/themes/next/source/css/_custom/custom.styl后面加下面代碼
instantclick { display: none;}
可能會有一些問題，比如與 FancyBox、Google Analytics 等等的兼容問題，解決方法自行查看文檔或 Google。 在這里會出現(xiàn)圖標(biāo)不顯示的問題，解決方案是在主題全局配置文件/blog/themes/next/_config.yml中搜索fontawesome,然后將其修改為fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css即可解決圖標(biāo)不顯示的問題。
安裝hexo-filter-optimize和hexo-service-worker
在站點(diǎn)目錄下鍵入命令npm install hexo-service-worker hexo-filter-optimize --save,如果出現(xiàn)安裝錯(cuò)誤，可參考我的解決方案，鏈接為：
https://blog.csdn.net/Fitz1318/article/details/86556013 然后在站點(diǎn)配置文件blog/_config.yml中后面添加如下代碼：
# offline config passed to sw-precache.service_worker: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2} stripPrefix: public verbose: truefilter_optimize: enable: true # remove static resource query string # - like `?v=1.0.0` remove_query_string: true # remove the surrounding comments in each of the bundled files remove_comments: true css: enable: true # bundle loaded css file into the one bundle: true # use a script block to load css elements dynamically delivery: true # make specific css content inline into the html page # - only support the full path # - default is ['css/main.css'] inlines: excludes: js: # bundle loaded js file into the one bundle: true excludes: # set the priority of this plugin, # lower means it will be executed first, default is 10 priority: 12
至此結(jié)束所有工作了。趕快部署查看效果吧。
