11分钟优化加速博客网站细节

11分钟优化加速博客网站细节

莫扎特曾经说过大胆地踏上旅途吧，我不知道路途的前方究竟有什么，但是，我们还是迈出了步伐，我们仍在旅途之中

---

目前本人对前端 SEO 等也正处于探索和学习的阶段上，希望有任何问题和建议请留言哦~

1. 为什么要优化呢?

​ 当你打开一个网站时迟迟未能看见显示的页面的时候是不是很暴躁好没耐心呢，所以网站的优化对于开发者来说是不可少的工作呢。

而可能大多数人和我一样，对于可以不用购买服务器，直接使用Hexo生成静态页面，使用GitHub Pages作为服务器，这样就可以搭建出自己博客了。

如何使用Hexo和GitHub搭建博客请参考我另外篇文章 > 基于Hexo和 hexo-theme-matery的个性化定制开发

然而有个问题，GitHub的访问速度太慢了，对于我来说太暴躁了！所以就想寻找出更多的优化方法来解决这问题。

2.如何优化呢?

1.更换搭建环境

不使用GitHub来搭建博客,而选择使用Gitee或者coding来搭建，当然有些人会觉得还是GitHub的习惯点呢；

2. 所有的类库使用CDN加速

目前稳定且好的推荐如下：

• jsdelivr
• bootcdn
• staticfile
• baomitu

使用方法就是像本地一样更换成线上的网址就行了

如：<script src="https://cdn.bootcss.com/aos/3.0.0-beta.6/aos.js"></script>

3. 自定义Js、Css等文件加速

​ 使用GitHub+jsdelivr 的方式加速，jsdelivr 可以直接通过引用 Github 的资源，所有用来做CDN加速也不错;

使用方法：直接引用就行，如：https://cdn.jsdelivr.net/gh/用户名/仓库名/文件。

如我的用户名为：athink8 ; 仓库名：myGithub.；想引用的文件：/libs/others/clicklove.js

那引用链接为：

https://cdn.jsdelivr.net/gh/

​ + athink8/myGithub/libs/others/clicklove.js

防坑指南：正常来说你需要GitHub打包才可以标识访问,虽然偷工减料，但是有时候会出现资源未更新的情况，

​ 正确的做法是 加上@latest 这样就可以依然不打包使用最新提交的资源了。

​ 如:https://cdn.jsdelivr.net/gh/athink8/

​ + myGithub@latest/libs/others/clicklove.js

4. 图片资源处理

​ 图片一般都挺大的，为了加快访问速度当然需要做些变动才行呢。

​ 尽量不使用本地图片，而改成使用线上图床。

​ 什么是图床呢?图床一般是指储存图片的服务器。

​ 图床推荐：

• 微博 : 免费、有损质量
• 七牛云:10G免费空间，每月10G国内和10G国外流量，速度快
• 又拍云: 注册认证后有10G免费空间，每月15G的HTTP和HTTPS流量,需加logo
• SM.MS：免费
• 路过图床：免费
• 阿里oss：收费、稳定
• 腾讯cos：新用户六个月的免费存储容量、免费请求和免费流量
• GitHub+jsdelivr 搭建

5. 代码压缩

精简代码可以有效的提高优化呢，如所说的类库也尽量使用带有min的版本。

手动压缩代码可以使用一些工具，如 站长工具、压缩工具箱。

自动压缩的话，如果是使用hexo搭建博客的话可以使用gulp压缩代码，安装如下：

1. 进入站点根目录下执行下面的命令：

# 全局安装gulp模块
npm install gulp -g
# 安装各种功能模块
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 安装额外功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

2. 在站点根目录新建文件 gulpfile.js，并复制以下内容

ar gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

3. 执行方式有两种：

• 执行 gulp或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码压缩。
• 执行 gulp build ，这个命令与第1种相比是在最后又加了个 hexo d ，等于说生成、压缩文件后并自动部署。

值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉即可

6. 图片懒加载

1. hexo安装懒加载插件：hexo-lazyload-image

2. 在站点根目录执行下面的命令：

   npm install hexo-lazyload-image --save

3. 在站点配置文件下添加下面的代码：

lazyload:
  enable: true  #开启图片懒加载
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif #图片未加载的图片

4. 最后执行hexo clean && hexo g && hexo s就可以看到效果了。

7. 全站托管使用CDN

这才是重点嘛

国内付费的CDN服务商有阿里云、腾讯云等应该都不错的样子。

然而还是看看有没有免费的吧。(穷)

本人觉得还不错且稳定的推荐:Cloudflare

虽然CloudFlare CDN节点基本上在国外,国内的少且经常不通，但是将就着用吧。

推荐使用第三方 CloudFlare 面板来接入，因为中文可以看的懂，也支持允许 CNAME 方式接入 CloudFlare

CloudFlare 面板提供商：

• 笨牛网-Cloudflare免费CDN管理平台
• TLOXYGEN
• 挖站否-CF 管理平台

---

目前已知优化如上所述，如我发现更多优化技巧将会持续更新的~

欢迎各位朋友还有啥建议的欢迎留言哈~