Vite.js, Sevelte.js, and Windi CSS: The Perfect Combo for My Web Dev

#vite #svelte #windicss #webdev

Why

Vite is fast.

Svelte is elegant.

Windi CSS is easier to install than Tailwind on Vite-Svelte.
And you should read this before you choose: https://github.com/windicss/windicss/discussions/176

Preparation

I strongly recommend pnpm as it is much faster and saves spaces on disks. If you haven't installed it, run:

npm i -g pnpm

Get started

First, create new vite project using:

pnpm create vite

Then choose svelte in the interactive CLI dialog.

Then:

cd projectFolder
pnpm i
pnpm i -D vite-plugin-windicss windicss

Then in vite.config.js:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import WindiCSS from 'vite-plugin-windicss'

// https://vitejs.dev/config/
export default {
  plugins: [
    WindiCSS(),
    svelte()
  ],
}

In main.js:

import 'virtual:windi.css'

Done!

pnpm dev
pnpm build

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.