vue项目中字体库压缩实现思路与方法，工具

我采取的思路：把vue中项目中所有用到的中文抽出来，用font-spider进行压缩

0.接手维护一个现成可视化项目，字体库是三个苹方合起来近32m，加载时间要8s出头，产品提出优化

Part1

1.font-spider 1.0 字体文件能常对应的是常用的字体库，涉及字体多，体积也大，实际项目中用到的字体是有限的，font-spider 的作用就是抽取项目中用到的中文，用不到的过滤掉 1.1 把你用到的中文放到一个html文件中， 1.2 html文件要引用到相关的字体文件 1.3 执行 font-spider 生成字体文件 1.4 我实际项目中生成的文件为1000kb 1.5 font-spider 是全局命令，没必要把字体文件放到项目层级，可以单独做字体文件再复制到项目中，

Part2

因为要把用到的文字都抽出来，想过的办法

1.打包文件，把打包的内容，全部放到html中 2.搜索，手动把中文摘出来 3.查下有没有能自动抽出中文的工具 4.font-spider-plus查在线

方法4 我试了，略慢，最终效果没看到，其它方法太笨逼了，搜到最后找到一种可行的方法， 1.用node读取文件中的文件，把文件中的内容中文部分过滤出来，生成excel文件， 2.把excel中的内容复制出来，去重， 3.要加大小写字母和数字 放到part1中的html中

其它细节，font-spider要装全局，因为该项目老，所以要用老版本的node ,6,8,10,亲测12也可，所以要装一个node 版本切换的工具，

附 node 代码

const path = '../test/src' // 文件夹地址
const outerFileName = '国际化词汇汇总' // 输出文件名

const fs = require('fs')
const xlsx = require('node-xlsx')

try {
  const filePathArr = []

  // 递归获取所有文件路径（js、vue）
  function getAllFilesPath(path) {
    const files = fs.readdirSync(path)
    files.forEach((file) => {
      if (/\.js$|\.vue$/.test(file)) {
        filePathArr.push(path + '/' + file)
      } else if (file.indexOf('.') === -1) {
        getAllFilesPath(path + '/' + file)
      }
    })
  }
  getAllFilesPath(path)
  console.debug('文件总数:', filePathArr.length)

  // 遍历所有的文件 处理成字符串
  let filesStr = ''
  filePathArr.forEach((path) => {
    filesStr += fs.readFileSync(path, 'utf8')
  })

  // 去除多行注释/单行注释/html注释
  filesStr = filesStr.replace(/(\/\*[\s\S.]*?\*\/)|(\/\/[\s\S.]*?\n)|(<!--[\s\S.]*?-->)/g, '')
  // 或者这样写也行，看起来清晰点，就是效率低点
  // filesStr = filesStr
  //    .replace(/\/\*[\s\S.]*?\*\//g, '')
  //    .replace(/\/\/[\s\S.]*?\n/g, '')
  //    .replace(/<!--[\s\S.]*?-->/g, '')

  // 获取字符串中的所有中文
  const cnArr = Array.from(new Set(filesStr.match(/[\u4e00-\u9fa5]+/g)))

  // 转换为xlsx格式
  const buffer = xlsx.build([{ name: 'sheet', data: cnArr.map((word) => [word]) }])

  // 写入文件
  fs.writeFileSync(`${outerFileName}.xlsx`, buffer, 'binary')
  console.debug('输出excel成功！')
} catch (err) {
  console.debug(err)
}

作者：LaoYutang
链接：https://juejin.cn/post/7062696192517341221
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。