如何优化博客
请注意、本篇文章介绍的只是如何优化、并不包含其中的原理、并且优化只做参考
接下来介绍我是通过哪些方面来优化博客。使用 cdn 加速、压缩静态资源、异步加载。
CDN
CDN（内容发布网络）是一组分布在多个不同地理位置的 Web 服务器，用于更加有效地向用户发布内容。在优化性能时，向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如，CDN 可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。
以 Hexo 博客 (Butterfly) 为例、通过 hexo s 生成的静态资源会存放在 img、css、js 目录下、托管在网站中直接访问静态资源速度要较慢点、所以我们会采取引入 CDN 来解决。推荐使用 jsdelivr、具体如何使用可以通过搜索引擎来解决。
针对静态资源
例如配置文件(_config.Butterfly.yml)：
# CDN# Don't modify the following settings unless you know how they work# 非必要請不要修改CDN: # main main_css: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/css/index.css jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js main: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/main.js utils: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/utils.js # search local_search: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/search/local-search.js algolia_js: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/search/algolia.js # Conversion between Traditional and Simplified Chinese translate: https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/tw_cn.js
需要静态加速的有：main_css、main、utils、local_search 或者 algolia_js、translate。但是要注意、主题更新时静态资源不可能第一时间更新、如 jsdelivr 上的资源可能会有一天以上的缓存、这时可以强制刷新(purge)
例如：
https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/main.js
通过将 gcore 替换成 purge、带 purge 的链接只是用来刷新
https://purge.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/main.js
看到返回的 json 数据中显示的状态是 OK、就可以重新访问 https://cdn.jsdelivr.net/gh/NebulaCipher/CDN@1.0/js/main.js
参考文献：
免费cdn：jsDeliver+github使用教程_哔哩哔哩_bilibili
免费CDN：jsDelivr+Github 使用方法 - 知乎 (zhihu.com)
针对全站加速
当然以上操作看起来有些麻烦。如果备案了可以使用又拍云等一系列 CDN 加速服务商、可以对全站进行加速。
压缩静态资源
压缩 CSS 和 JS 用的是 Gulp
参考 Butterfly 作者的教程：https://butterfly.js.org/posts/4073eda/#Gulp%E5%A3%93%E7%B8%AE
安装 Gulp
npm install -g gulp-cli npm install gulp --save-dev
安装压缩 HTML、CSS、JS
压缩HTML gulp-html-minifier-terser 可以压缩 HTML 里的 ES6 语法
npm install gulp-htmlclean --save-devnpm install gulp-html-minifier-terser --save-dev
压缩CSS
npm install gulp-clean-css --save-dev
压缩JS
npm install --save-dev gulp-uglifynpm install --save-dev gulp-babel @babel/core @babel/preset-env
创建 gulpfile 文件
在博客根目录下创建gulpfile.js
var gulp = require('gulp');var cleanCSS = require('gulp-clean-css');var htmlmin = require('gulp-html-minifier-terser');var htmlclean = require('gulp-htmlclean');var uglify = require('gulp-uglify')var babel = require('gulp-babel') gulp.task('compress', () => gulp.src(['./public/**/*.js', '!./public/**/*.min.js']) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(uglify().on('error', function (e) { console.log(e) })) .pipe(gulp.dest('./public')))gulp.task('minify-css', () => { return gulp.src(['./public/**/*.css']) .pipe(cleanCSS({ compatibility: 'ie11' })) .pipe(gulp.dest('./public'));}); gulp.task('minify-html', () => { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, //清除 HTML 註释 collapseWhitespace: true, //压缩 HTML collapseBooleanAttributes: true, //省略布尔属性的值 ==> removeEmptyAttributes: true, //删除所有空格作属性值 ==> removeScriptTypeAttributes: true, //删除
修改 themes\Butterfly\layout\includes\additional-js.pug (部分内容)
其实下面内容也修改不大、毕竟不是所有 JS 都能使用异步加载、可能会出现一些问题
div script(src=url_for(theme.gcore.utils)) script(src=url_for(theme.gcore.main)) if theme.translate && theme.translate.enable script(src=url_for(theme.gcore.translate)) if theme.medium_zoom script(src=url_for(theme.gcore.medium_zoom)) if theme.instantpage script(src=url_for(theme.gcore.instantpage) type="module") if theme.lazyload.enable script(src=url_for(theme.gcore.lazyload)) if (theme.snackbar && theme.snackbar.enable) script(src=url_for(theme.gcore.snackbar)) if theme.pangu && theme.pangu.enable !=partial('includes/third-party/pangu.pug', {}, {cache:theme.fragment_cache}) //- search if theme.algolia_search.enable script(src=url_for(theme.gcore.algolia_js) defer) else if theme.local_search.enable script(src=url_for(theme.gcore.local_search) defer) // ...
PWA
渐进式网络应用程式（英语：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程式，但它可以以传统应用程式或原生移动应用程式形式展示给用户。这种应用程式形态视图将目前最为现代化的浏览器提供的功能与行动装置的体验优势相结合。
我会把这个放在优化博客中个人只是喜欢那个更新提示、在我的使用中、PWA 最大的作用是能将需要缓存的内容缓存在浏览器、刷新页面时会直接获取缓存
PWA 教程： https://butterfly.js.org/posts/4073eda/#PWA
Pjax
通过 ajax 和 pushState 技术提供了极速的（无刷新 ajax 加载）浏览体验，并且保持了真实的地址、网页标题，浏览器的后退（前进）按钮也可以正常使用
这使得页面切换变得更加迅速、当然还是存在一些 Bug
开启只需要在 _config.butterfly.yml 中 开启 pjax
YMLpjax: enable: true exclude: # - xxxx # - xxxx
参考：
Butterfly 安装文档 (六) 进阶教程
更多大佬的教程：
Hexo 异步加载方案