vue自定义字体加载过慢优化方法

起因

因为自己在用vue写个人界面来的，进度大概已经部署上线了，还在测试css的bug，但是发现了一个很重要的问题，字体加载需要5s左右，因为我使用的自定义字体——思源宋体，所以需要用户下载后加载，我看了一下发现字体包有12M，导致了加载过慢，所以想要优化一下

优化方法

因为字体包的ttf都是引入了大部分汉字，而我仅仅需要不超过200个汉字，所以可以从这里开始优化，进而缩小ttf的大小

1.提取页面的汉字，英文，数字

因为我使用的是vue，也就是页面都加载在vue文件，而字面上的字体优化包都是针对html文件，所以我需要自己写一个程序把页面里的所有需要字体的地方提取出来，我是用node.js实现的这一过程，执行完毕后生成一个与此文件同级的word.txt文件，里面就是提取的字集

let fs=require('fs'),
    files,
    content=[];

let  walk=function(dir,exclude) {
    let results = [];
    let  list = fs.readdirSync(dir);
    list.forEach(function(file) {
        file = dir + '/' + file;
        let stat = fs.statSync(file);
        if(stat&& stat.isDirectory()){           
            results = results.concat(walk(file))
        }else{
            if(/.(vue|html|js)$/.test(file)){
                results.push(file)
            }    
        } 
    });
    return results
};

((dir)=>{
    files=walk(dir);
    files.forEach(file=>{
        let text=fs.readFileSync(file);
        text.toString().split('').forEach(letter=>{
            if(/[a-zA-Z0-9\u4e00-\u9fa5]/.test(letter)&&content.indexOf(letter)==-1){
                content.push(letter);
            }
        })    
    })
    fs.writeFile('./word.txt',content.join(''),'utf8',function(error){
        if(error){
            console.log(error);
            return false;
        }
        console.log('写入成功');
    })
})(src);//src就是你的项目目录地址，视情况而定

2.针对提取的字集优化文件

1.使用fontmin

fontmin是一个百度开发的字集缩短工具，这是它的地址，fontmin，如果不会引入node使用就直接使用它的客户端，下载后把上面txt里的复制就可以生成对应的ttf文件了

2.使用字蛛

font-spider是一个直接爬取网页的ttf优化工具，font-spider，它直接针对html操作
1. npm install font-spider -g //全局引入
2. 操作 @font-face，将字体引入到对应的html中
3. font-spider ./demo/*.html //通配所有的html文件

总结

优化后11M的字体库就变成80k了，加载速度变成了0.1s不到，极大的增加了用户体验，get到一个方法