前言
博客的编辑器终于做好了，可以愉快的写博客了
码起来然后SHADOW发现博客页的加载越来越慢了，理论上博客的数量并不多。不应该会慢才对
排查问题
排查网络
打开Chrome的开发工具调到网络观察页面的加载情况有两个请求比较耗时
这是Bing的每日图片接口，用来做随机的主页博客背景。先记录下来，后续考虑换掉
这个很明显是webpack的打包文件，重点是体积有点大，有500多kb
排查报错
本地环境开发时都排查过一遍，不太会有报错或者异常，略过
排查性能
切换到Chrome的performance，重新加载页面，观察整个页面的加载情况。
这里主要看FPS一栏，除了最初的200毫秒，也就是First Paint前基本保持满帧，应该也不是操作dom引起的重绘和回流
所以可以确定是文件加载过慢的导致的，而文件又比较大，所以从文件下手
webpack的打包的文件经过混淆和重新编译，直接在浏览器中看是看不出什么端倪的。所以需要工具的帮助
诊断
对webpack打包做分析推荐使用 webpack-bundle-analyzer
vue-cli项目可以直接引入 vue-cli-plugin-webpack-bundle-analyzer
插件的使用也比较简单，在vue.config.js中引入就好
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: true,
analyzerMode: 'server'
}
},
然后执行构建npm run build构建完成后根据配置的不同打开dist下的report.html或者访问http://loalhost:8888。下图是分析页面
这是处理后的截图，最初截图忘记截取了
在博客编辑器完成之前都是通过typora编写，当时为了方便直接使用base64格式的图片，由于typora做的很好，完全感觉不到文档的大小
但是博客肯定不行，博客的逻辑是将md文件转换成vue模板，然后打包构建成静态文件再由浏览器解析渲染，也就是如果一个图片的base64包含2w个字符，那这个vue模板也有这2w个字符
找到问题就很简单了，用博客编辑器重新编辑下，把base64删掉，重新截图，上传，保存，发布。
然后再打开工具观察下网络的请求状况，问题又出现了
这PNG的截图也太大了吧，一张图片2MB?!
图片压缩
其实大部分截图软件或者应用自带的截图功能，为了保证图片的质量不丢失像素，都是优先使用的无损压缩的格式，也就是PNG格式。这个格式的特点就是清晰，文件大。所以上传的图片一定要做压缩
图片压缩的原理解释起来比较复杂，基本分为两步，预解析以及算法的二次编码，通过解析图片的元信息标记可以被优化压缩的区域，通过算法将可以压缩的区域做二次编码。所以越简单，颜色越少的图片，压缩的比例越高。具体的可以看下面这篇文章
既然要做图片压缩，首先就是技术选型 逛github
在Node技术栈下对图片做压缩处理, 有两个插件个人感觉比较不错
支持链式调用的api风格，使用起来非常舒适。下面是官方的example
var images = require('images')
images('input.jpg')// 加载图像文件
.size(400) // 等比缩放图像到400像素宽
.draw(images('logo.png'), 10, 10) // 在(10,10)处绘制Logo
.save('output.jpg', { // 保存图片到文件,图片质量为50
quality: 50
})
但是需要注意images对环境有要求,下面是支持列表
Platform Architecture Node Version Windows x86 & x64 0.9.11, 0.10, 0.12, 1, 2, 3, 4, 5, 6, 8, 10 OSX X64 0.9.11, 0.10, 0.12, 1, 2, 3, 4, 5, 6, 8, 9, 10 Linux* x86 & x64 0.9.11, 0.10, 0.12, 1, 2, 3, 4, 5, 6, 8, 10
使用也比较方便，贴下官方的example
const imagemin = require('imagemin')
const imageminJpegtran = require('imagemin-jpegtran')
const imageminPngquant = require('imagemin-pngquant');
(async() => {
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminJpegtran(),
imageminPngquant({
quality: [0.6, 0.8]
})
]
})
console.log(files)
})()
同时还提供压缩插件的仓库，大部分的图片格式都能找到对应的压缩插件
把插件整合进现有的工具中
/**
* 压缩图片
* @param input <String>|<Buffer>
* @return { Buffer }
*/
exports.compressImage = async function(input) {
let inputBuffer = input
if (input instanceof String) {
inputBuffer = fs.readFileSync(input)
}
return await imagemin.buffer(inputBuffer, {
plugins: [
imageminJpegtran(),
imageminPngquant({
quality: [0.6, 0.8]
})
]
})
}
测试，提交代码，服务器代码更新，PM2自动重启，再次上传图片可以看到压缩插件开始工作了
后记
博客编辑器终于算是暂时告一段落，自己用起来还算舒服，虽然比不上typora。但是能自己整合发布功能还是不错的，也学到了不少知识和技能。 SO，结束里程碑，再来一个 奔跑吧程序汪
