Release Vite 6.0
This release of Vite 6.0 introduces a range of updates and improvements designed to simplify development workflows, enhance performance, and address modern web development challenges. With the introduction of the Experimental Environment API and modernized tooling, Vite 6.0 continues to evolve as a versatile solution for developers. Here’s a comprehensive look at the new features, ecosystem growth, and exciting announcements unveiled with this release.
👉 Subscribe to our Telegram channel to stay updated in real-time! We post the latest updates and interesting content related to React, JavaScript, TypeScript, and more.
The Growth of the Vite Ecosystem
Over the past year, Vite has seen remarkable growth, with weekly npm downloads skyrocketing from 7.5 million to 17 million. Major frameworks such as Astro, Nuxt, SvelteKit, Solid Start, Qwik City, and RedwoodJS are leveraging Vite for faster builds and a superior development experience. Prominent tech companies like OpenAI, Google, Microsoft, NASA, and Shopify have also integrated Vite into their workflows, highlighting its impact across industries.
Major companies, including OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, and Reddit, have also incorporated Vite into their processes, underscoring its growing influence in the tech industry. To foster collaboration and share insights, a new initiative invites organizations to share their experiences using Vite, showcasing its impact across various sectors.
Highlights from ViteConf 2024
The third ViteConf, hosted by StackBlitz, brought together developers and contributors to celebrate the tool’s advancements. This year’s event, the largest yet, introduced several notable developments:
- VoidZero: A new company focused on building a high-performance, open-source JavaScript toolchain. VoidZero is behind Rolldown and Oxc, which are set to integrate with Vite in the near future.
- bolt.new: Unveiled by StackBlitz, this innovative Remix app combines Claude and WebContainers to let developers create, run, and deploy full-stack applications seamlessly.
- Storybook’s Testing Advancements: Storybook showcased its new Vitest-powered testing features, setting the stage for even more robust workflows.
Adding to these advancements, Vite unveiled a sleek new landing page at vite.dev. This fresh look signals a new chapter in Vite’s journey, reflecting its growing prominence in the web development world.
Notable Changes and Improvements
Default Values for resolve.conditions
Previously, resolve.conditions was an empty array ([]), and certain conditions were automatically added internally. In the updated version, conditions like ['module', 'browser', 'development|production'] for resolve.conditions and ['module', 'node', 'development|production'] for ssr.resolve.conditions are no longer automatically included and must be specified manually.
The development|production value depends on process.env.NODE_ENV. Default values are now available as defaultClientConditions and defaultServerConditions. If you used custom conditions like ['custom'], you need to update them to ['custom', ...defaultClientConditions].
Enhanced JSON Handling with JSON.stringify
In Vite 5, setting json.stringify: true would automatically disable json.namedExports. In Vite 6, json.namedExports remains enabled even with json.stringify: true. To disable named exports, you can explicitly set json.namedExports: false. Additionally, Vite 6 introduces 'auto' as the default for json.stringify, which only serializes large JSON files. Set json.stringify: false to turn off this behavior entirely.
Extended Asset Handling in HTML
In Vite 5, only a few HTML elements, like <link href> and <img src>, could reference assets for bundling. Vite 6 expands this support to more HTML elements (details in the HTML docs). To skip processing specific elements, use the vite-ignore attribute.
Modern Sass API by Default
The modern Sass API is now the default, replacing the legacy API. You can still use the legacy version by setting css.preprocessorOptions.sass.api: 'legacy', but support for this will be removed in the next major release. To migrate, refer to the Sass documentation.
Customizable CSS Output File Names
Previously, the CSS output file name in library mode was always style.css. Now, the default file name is derived from "name" in package.json. You can customize this by using build.lib.cssFileName. If you need to keep using style.css, set build.lib.cssFileName: 'style'.
Updates to postcss-load-config
postcss-load-config has been upgraded from v4 to v6. Now, tsx or jiti is required for TypeScript configurations, replacing ts-node. YAML configs now require yaml to be loaded.
Experimental Environment API
The new Environment API in Vite 6 narrows the gap between development and production environments, enabling developers to build tools and workflows that closely mimic production. This advancement opens the door to new opportunities for enhancing the JavaScript ecosystem.
What Does This Mean for Developers?
- For SPA Developers: If you’re building a single-page application (SPA), there’s no change to your workflow. Vite continues to deliver the same smooth and fast experience as before.
- For Custom SSR Apps: Framework authors and plugin maintainers targeting server-side rendering (SSR) can now use the Environment API to streamline their development process. Vite 6 remains backward compatible, ensuring a seamless transition for existing custom SSR setups.
- For Plugin Developers: The new API empowers plugin maintainers to build more robust integrations by leveraging features that offer greater control and precision in both development and production environments.
With the Experimental Environment API, Vite empowers developers to push boundaries while maintaining ease of use and flexibility.
Node.js Support
Vite 6 continues to support Node.js 18, 20, and 22, dropping support for Node.js 21. Future releases will likely require newer Node.js versions as older ones reach their end-of-life (EOL).
Conclusion
Vite 6.0 exemplifies thoughtful development, introducing features that enhance workflows while maintaining a forward-looking vision. Its expanding ecosystem, adoption by major companies, and support for modern frameworks highlight its significance in shaping the future of web development. Whether you’re starting a new project or upgrading an existing one, Vite 6.0 empowers developers to create efficient, high-quality applications with ease. It’s more than just a tool — it’s a cornerstone of modern front-end development.
