DEV Community

Cover image for Angular 16 with Vite
Kristiyan Velkov
Kristiyan Velkov

Posted on

13 1 1 1 1

Angular 16 with Vite

What is Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

  • A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Why Angular CLI start using Vite ?

Vite makes your builds faster.

  • Early tests showed over 72% improvement in cold production builds.

  • In ng serve powers both your development and production builds with Vite!

*Angular CLI relies on Vite exclusively as a development server. *

Configuration and Support selector mathing

Angular compiler needs to maintain a dependency graph between your components which requires a different compilation model than Vite.

You can give Vite + esbuild a try by updating your angular.json:

"architect": {
  "build": {  * Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
Enter fullscreen mode Exit fullscreen mode

Image description

linkedin


Image description

If you like my work and want to support me to work hard, please donate via:

Revolut website payment or use the QR code above.

Thanks a bunch for supporting me! It means a LOT 😍

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay