这是我参与第五届青训营 伴学笔记创作活动的第14天 一，为什么需要构建工具
前端工程的痛点：
- 模块化
- 资源编译
- 产物质量
- 开发效率
前端构建工具的意义：
- 模块化方案→提供模块加载方案/兼容不同模块规范
- 语法转译→高级语法转译/资源加载
- 产物质量→产物压缩、无用代码删除、语法降级
- 开发效率→热更新
二，Vite是什么？为什么选Vite？
vite：
- 新一代前端构建工具
- No-bundle开发服务和生产环境基于rollup的bundler组成
- 高性能+简单易用
当下（wepack、rollup）的问题
- 缓慢的启动→项目编译等待成本高
- 缓慢的热更新→修改代码后不能实时更新
浏览器原生ESM支持：
- script标签增加type=module属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于esbuild的编译性能优化：
- esbuild基于golang开发的前端工具，具备打包器+编译器+压缩器
- 性能极高，在vite中被深度使用
三，vite上手使用
提前安装pnpm npm i -g pnpm
初始化命令 pnpm create vite
安装依赖 pnpm install
启动项目 npm run dev
生产环境：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段未使用到的代码进行删除
- tree shaking会默认自动开启
四，Vite整体架构
依赖预打包：
为什么：
- 避免node_modules过多的文件请求
- 将commonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径 今日的知识是webpack的延伸，vite，是一个面向现代浏览器，基于ECMA标准的ES module实现的一个更轻更快的web应用开发工具
