The Inner Workings of Vite Build - Matias Capeletto, DevOps.js Conference 2022

Explore the inner workings of Vit Build, a modern build tool using Rollup under the hood, with features like tree shaking, code splitting, and asset preloading, and learn how to customize the build process with its flexible plugin system.

Key takeaways
  • Vit is a modern build tool that uses Rollup under the hood, with features like tree shaking, code splitting, and asset preloading.
  • Vit has a flexible plugin system that allows users to customize the build process, with a wide range of plugins available for use.
  • The build process in Vit starts with the index.html entry point, and uses a transform hook to transpile and bundle code.
  • Vit has built-in support for features like single file components, Vue/React/Svelte ecosystems, and out-of-the-box support for TypeScript, JSX, and PostCSS.
  • Vit uses esbuild for compiling and minifying code, and has a built-in manifest plugin that generates a manifest.json file.
  • Vit has a small install size and a fast build process, making it suitable for large applications.
  • Vit provides a good balance between development and production builds, with features like hot module replacement and asset preloading available out of the box.
  • Vit has a vibrant ecosystem of plugins that can be used to customize the build process, with a wide range of plugins available for use.
  • Vit supports code splitting for both JS and CSS assets, and has built-in support for dynamic imports.
  • Vit has a powerful plugin API that allows developers to create custom plugins to extend its functionality.
  • Vit has been used in production by several major frameworks, including Vue, React, and Svelte.