前言

博客的编辑器终于做好了，可以愉快的写博客了 ~~码起来~~

然后SHADOW发现博客页的加载越来越慢了，理论上博客的数量并不多。不应该会慢才对

排查问题

排查网络

打开Chrome的开发工具调到网络观察页面的加载情况有两个请求比较耗时

https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture

这是Bing的每日图片接口，用来做随机的主页博客背景。先记录下来，后续考虑换掉

http://www.shadow-li.com.cn/static/js/chunk-41d0b938.841343de.js

这个很明显是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。下图是分析页面

这是处理后的截图，最初截图忘记截取了

从分析页上可以明显的看到一篇博客《PM2进阶指南》的占比非常高，总大小有200多kb。找到这个文件，一打开SHADOW就明白为什么那么大了

在博客编辑器完成之前都是通过typora编写，当时为了方便直接使用base64格式的图片，由于typora做的很好，完全感觉不到文档的大小

但是博客肯定不行，博客的逻辑是将md文件转换成vue模板，然后打包构建成静态文件再由浏览器解析渲染，也就是如果一个图片的base64包含2w个字符，那这个vue模板也有这2w个字符

找到问题就很简单了，用博客编辑器重新编辑下，把base64删掉，重新截图，上传，保存，发布。

然后再打开工具观察下网络的请求状况，问题又出现了

这PNG的截图也太大了吧，一张图片2MB?!

图片压缩

其实大部分截图软件或者应用自带的截图功能，为了保证图片的质量不丢失像素，都是优先使用的无损压缩的格式，也就是PNG格式。这个格式的特点就是清晰，文件大。所以上传的图片一定要做压缩

图片压缩的原理解释起来比较复杂，基本分为两步，预解析以及算法的二次编码，通过解析图片的元信息标记可以被优化压缩的区域，通过算法将可以压缩的区域做二次编码。所以越简单，颜色越少的图片，压缩的比例越高。具体的可以看下面这篇文章

PNG图片压缩原理解析

既然要做图片压缩，首先就是技术选型 ~~逛github~~ 在Node技术栈下对图片做压缩处理, 有两个插件个人感觉比较不错

images

支持链式调用的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

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

imagemin

> 使用也比较方便，贴下官方的example

const imagemin = require('imagemin')
const imageminJpegtran = require('imagemin-jpegtran')
const imageminPngquant = require('imagemin-pngquant');

(async() =&gt; {
  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自动重启，再次上传图片可以看到压缩插件开始工作了