如何优化highlight高亮markdown

简介

最近一直在纯手工搭建自己的个人博客，其中用到了highlight插件来高亮markdown，刚开始本地开发的时候也没注意，渲染的挺快，但是真正放到服务器上的时候，我都惊呆了，一个js竟然用了2.5s加载，体验极差，在经过一系列优化之后，最终降到了26ms，那么下面我就讲下我整个的优化过程。

首先呢，我发现这个webpack压缩过后的JS大概有1.5M，所以第一想到就是在nginx配置了gzip压缩，代码如下

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/x-Javascript text/css application/xml text/Javascript application/x-httpd-php application/Javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;


可惜效果并不如意，体积确实小了不少，但是加载还是很慢，于是我想如果我给他预读取呢，是不是又好了一点呢，于是，我给路由配了prefetch，如下所示:

但是，结果只快了8,9ms，可见并不如意，可能这时候大家会说可以尝试利用缓存，但是缓存只是针对第一次之后的，而现在的问题是第一次就很慢了，所以缓存并不符合此情景，最终，我就决定在hightlight这个插件脚本上下功夫，看看能不能只引核心脚本，于是我就去看了官方的markdown，看完了之后，我终于知道它的体积为什么那么大了，因为它脚本里面含了各国的语言，表情什么的，当然我也找到了我想要的，就是只引核心脚本和样式，代码如下

import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github.css';


在修改之后，最终体积只有16kb，这样加载渲染速度自然而然就降低了很多很多很多，只用了26ms，非常之nice~