前言

假如问你性能优化方案，答案是否还是千篇一律的八股文（异步加载、拆包、预加载、压缩代码体积）？

稍微有点规模的公司，前辈们肯定早就打好了基础。

不妨尝试从插件的角度来优化项目。

思想的核心在于：利用编译时的时间，换取运行时的时间。

怎么写？

const fileRegex = /\.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // 如果可行将提供 source map
        }
      }
    },
  }
}

这是官方教程上的一段代码。

不知道大家有没有和我一样的疑问？

src是啥？id是啥？code又是啥？

翻了几遍官方文档没有找到解释，只好上手打印一下。

id

根据控制台的打印结果，所料不差的话，id表示带路径的文件名。

src

根据控制台的打印结果，src表示文件内容。

code

结合id和src，以及官方示例，可以得到：code表示处理后的内容。

写什么？

之前做海外项目的时候，项目组在多语言的获取方法内添加了一个敏感词的屏蔽逻辑。

海外项目的多语言获取方法是无处不在，使用频率极高的，这也意味着敏感词的屏蔽逻辑调取的非常频繁。

假如能在编译时屏蔽敏感词，就能节省出大量运行时的时间，从而提升用户体验。

export default function filterDangerPlugin() {
  return {
    name: 'filter-danger-plugin',
    transform(src, id) {
      if (/.json/.test(id)) {
        return {
          code: src.replace('六', '*')
        }
      }
    }
  }
}

这是一个简易版的插件，逻辑在于将json文件中的六替换为*。

成果展示

结束语

突发奇想，写一个Vite插件，复现以前写过的一个Webpack插件，意外发现Vite没有loader的概念，一切皆plugin。

谈及Webpack，总是无法避免要回答loader和plugin的区别。

一本正经：loader基于AST实现文件类型转换，plugin是loader的补充。

心里话：不都是插件么？

之前光顾着研究Vite为什么快了，整理了一番官方文档，不得不说Vite追求开箱即用，以及抛弃loader行为，非常值得称赞。

越来越喜欢Vite了。