体验新轮子 Vite

简介

vite 是一个 Web Server 开发工具，基于浏览器的原生 ES module 支持，不预处理复杂的依赖关系
vite 打包用 rollup 非 webpack

vite 的按需编译

webpacl第一次加载时候其实先将完整的项目文件 build 后将编译文件 bundle 放在内存中，所以第一次很慢，热重载快

而 vite 不会任何操作，启动时只是起 Web Server，并不会编译所有的文件。等请求的时候拦截请求，编译所需文件，然后响应
虽然这样响应变慢，但 vite 会对编译后结果缓存方便下次用。当有 1000 + 文件时，先全局编译和按需编译的差别感知就比较明显
vite 只是优化开发体验的开发工具，最终还是需要打包出来的。第一次启动时会在 node_module 下缓存递归依赖文件。如果依赖版本不变，缓存就不会改变，所以第二次 npm run dev 时秒开

webpack VS vite

vue-cli-service serve -> build -> bundle -> 启动 WebServer 响应请求

vite server -> Web Server -> 拦截请求-编译请求文件 -> 相应请求

webpack 先编译，然后浏览器要什么给什么 vite 先启服务，然后要什么返回编译后结果

ES module
script type=“module” src="" -> src 必须是/ ./ …/ http
important xx from ‘’ 不支持直接写 node_module 下的文件名比如 import { createApp } from ‘vue’。 vite 会对这种写法处理成
import { createApp } from ‘/@modules/vue.js’ 使得原生 ES module 可以处理

Optimize

Vite 的一个子命令 npx vite optimize 手动生成 node_modules/.vite_opt_cache 缓存文件，

HMR

热重启

Vite build

npm run build 启动的是 vite build ，会把项目打包在 dist 目录下，减少 http 请求次数
HTTP1.1 标准下 chrome 同一个域名请求并发只有 6 个，多的请求只能等待
HTTP2 好很多，具体不清楚。vite 只是开发时候不打包，生产模式依然打包出 dist

ls -al

$ ls -al

total 147
drwxr-xr-x 1 jufjzq 197121     0  7月 12 22:31 .
drwxr-xr-x 1 jufjzq 197121     0  7月 12 22:30 ..
-rw-r--r-- 1 jufjzq 197121    35  6月 23 04:09 .gitignore       
-rw-r--r-- 1 jufjzq 197121   313  6月  3 03:30 index.html       
drwxr-xr-x 1 jufjzq 197121     0  7月 12 22:36 node_modules     
-rw-r--r-- 1 jufjzq 197121   260  7月 12 22:31 package.json     
-rw-r--r-- 1 jufjzq 197121 95024  7月 12 22:31 package-lock.json
drwxr-xr-x 1 jufjzq 197121     0  7月 12 22:30 public
drwxr-xr-x 1 jufjzq 197121     0  7月 12 22:42 src

开头 d 代表是一个文件夹，后边三位一组 r w x。组为当前组具备权限，当前用户具备权限，其他用户具备权限。r read w write x 执行权
-rw-r--r-- 1 jufjzq 197121 313 6月 3 03:30 index.html 当前用户继承与当前组，所以 rw-rw-rw