vite
前端工程化的新贵
以下截图来自于以官方 Quick Start 的demo
vite核心
本地阶段：使用esbuild预编译，没有打包过程
生产阶段：使用rollup进行编译打包
一、本地启动
本地启动时，主要做两件事情：
1、依赖预构建
对依赖（如vue.js、lodash等）进行预构建的目的：
模块化兼容：将CommonJS 或 UMD 风格的依赖项转换为 ESM
对依赖进行整合：将依赖和它自身的依赖整合成一个文件，避免页面加载时产生大量HTTP请求
依赖预构建之后的产物缓存在：node_modules/.vite/deps，只有一定的触发条件（比如lockfile有变化）才会触发重发预构建。
这些依赖属于不常变动的资源，如果需要强制预构建：
方法1：启动命令加
--force方法2：手动删除node_modules/.vite文件夹
2、启动本地服务器
本地服务器主要的作用是
响应资源请求
推送修改的资源：通过websocket将变动的资源推送给客户端，实现热更新
二、浏览器加载
1、打包后的入口模版
2、资源加载规则
通过入口文件进行解析，遇到import，则会发送一个对应请求，开发服务器返回后继续递归找出其他依赖
对于资源的分情况处理：
依赖：进行强缓存（通过
cache-control= max-age=31536000,immutable进行控制）源码：进行协议缓存（根据
304 Not Modified）
三、热更新
原理类似于webpack的dev-server，只是同步的是没有经过构建打包的源文件。
参考：
Last updated