svg-icons-interactive-playground VS vite

So, clone or download the repo or play directly with the code online on Stackblitz.

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { pluginAPI } from 'vite-plugin-api' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), pluginAPI({}) ], })

As you may already know, under-the-hood Vite uses the main bundler Rollup (instead of using the dreaded Webpack bundler).

Vite is a fast local development server, which uses a bundler to create the bundle of JS that the client receives. It currently uses two bundlers, actually.

Vite is a recommended bundler for React; thus, we'll use Vite in this tutorial. You can also use other tools like Create React App (CRA) instead.

https://vitejs.dev/ provides a quick and easy way to set up a boilerplate project with all the tooling you need.

Bun is great, yes!, Lately everyone is amazed and I was able to play around with it today, and I found it is pretty awesome to use it alongside with Hono, Vite and TailwindCSS.

Vite: A build tool that provides a faster and smoother workflow for developing web applications. It supports code splitting and breaks down codebases into smaller chunks, leading to more efficient loading and execution of JavaScript. It also supports lazy loading and ensures modules are only loaded when required, which reduces initial load times and improves performance. Its bundle size is 18.2kb minified and 5.9kb gzipped

We will be using Vite to create the React project. Vite is a tool to quickly start a project from a basic template for popular frameworks such as React, Angular, Vue, etc

import { defineConfig } from 'vite'; import { resolve } from 'path'; // https://vitejs.dev/config/ export default defineConfig({ build: { lib: { entry: resolve(__dirname, 'src/main.ts'), formats: ['es'] } }, resolve: { alias: { src: resolve('src/') } }, });