Writing Your First Vite Plugin

React Summit US

React Summit US 2024

Eunjae Lee

Vite is an essential tool for modern front-end development. We use it daily, but we know little about its inner workings. We write  .jsx or .vue files, but how do they get transpiled into .js files? There's likely some magic behind Vite's plugins, but how do they work? In this talk, we'll start by creating a simple plugin and progress to more advanced ones. After this session, you'll understand how Vite plugins work and the overall flow, even without prior knowledge of Vite plugins. With this new knowledge, you can perform computations during the build process that don't necessarily occur at runtime. This can naturally result in faster runtime performance. In some cases, the computation results are included directly in the bundle output, reducing the final bundle size (as you don't need to include the data or logic for the computation). Additionally, you can improve the developer experience by automating certain manual tasks. This talk will introduce you to something you hadn't considered learning before. It will make you realize that it's not as difficult as you might have thought, and hopefully, this talk will boost your confidence in learning.