Vite

vite | esbuild | vite docs | Vite指南

Tailwind CSS docs

Install Tailwind CSS with Vue 3 and Vite

Get started with Tailwind CSS

vite react tailwind jit

vite ts tailwnd starter

stackblitz - 前端在线开发工具

---

Vue examples

spotify clone

---

pinia - git | How To Set Up a React Project with Vite

CommonJs、AMD、UMD、es6模块化的区别

前端模块化进化CommonJs-AMD-CMD-UMD-ESM

前端打包工具rollup、webpack、vite

rollup更适合打包库，webpack更适合打包项目，vite基于rollup实现了热更新也适合打包项目。

!. rollup基于esm打包，打包生成的文件更小。（识别commonJs需要插件）
2. rollup原生支持tree-shaking，webpack2开始支持且消除效果不好。（去除未使用代码）
3. webpack支持代码切割。（分包）
4. webpack支持HMR。（热更新）。
5. vite在生产环境通过rollup进行打包（打包体积小），生成esm模块包。（快）
6. vite在开发环境时，基于浏览器支持esm，让浏览器解析模块，然后服务器按需编译返回。  
   同时基于esbuild（go）进行预构建打包不常变动的第三包，并用进行缓存。（缓存+快）
7. vite热更新，实现按需编译，按模块更新。webpack需要全部重新编译并更新。（快）