小迪博客PRO
文章 · 构建工具

自己写一个 Vite 插件要懂什么

周迟2026-08-23919

写 Vite 插件的门槛不在 API，而在理解「开发时和构建时是两条不同的路径」。搞清楚这两条路径上各自的钩子时机，插件才写得对。

两条路径，两套时机

开发环境是按需编译，模块被请求时才处理；构建环境是一次性全量处理。同一个钩子在两边触发的次数和顺序都不一样。

先认准要挂哪个钩子

  • 改写模块内容：在转换阶段做，别去碰解析阶段
  • 拦截资源加载：从解析阶段入手更稳
  • 影响产物输出：放到构建收尾阶段统一处理
ts
export default function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.special')) return null
      return { code: rewrite(code), map: null }
    },
  }
}

返回 null 是门手艺

不处理的模块一定要明确返回 null 或 undefined。返回空字符串会被当成「这个模块的内容就是空」，把原本的代码整个抹掉。

评论13

访客

登录后参与评论，你的发言会署上自己的名字。

  • 周迟

    周迟作者@zhouchi2026-08-23

    先占个位：文里的数字都是本地实测的，测试环境写在文末备注里，有疑问直接在这儿回。

  • 江辰

    江辰@jiangchen2026-08-24

    缓存那部分能不能再展开讲讲？我们这边命中率一直上不去。

  • 唐棠

    唐棠@tangtang2026-08-25

    产物裁剪这条被低估了，sourcemap 和语言包占的空间比想象中大。

  • 孟凡

    孟凡@mengfan2026-08-26

    构建脚本重写那段看着很有共鸣，最花时间的果然还是新旧产物对照。

  • 邓可

    邓可@dengke2026-08-27

    把流水线耗时先打出来这一步太重要了，不然优化全靠猜。

  • 罗叙

    罗叙@luoxu2026-08-28

    同意，先有数据再谈优化，不然改了半天不知道有没有用。