这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
为什么需要前端构建工具
前端模块化 提供一个统一的模块方案 兼容不同的模块规范
语法转译
高级语法转译。如果 sass、TypeScript 资源加载，如图片、字体、worker
产物压缩、无用代码删除、语法降级
支持热更新
Vite是什么
-
vite 是新一代前端构建工具，No-bundle开发，源文件不需要打包，生成环境基于 rollup ，它的特点是：高性能，dev和热更新都很快，简单易用
-
vite 使用 go 开发的 esbuild 工具，摒弃了原生js开发的弊端
-
vite 内置了很多webpack的基础设置，包括 css 的解析，html 插件等等
-
vite 基于原生ESM开发服务 vite dev serve，无需打包项目源码，天然按需加载，可以利用文件级的浏览器缓存
使用Vite
`#提前安装pnpm npm i -g pnpm
#初始化命令 pnpm create vite
#安装依赖 pnpm install
#启动项目 npm run dev`
生产环境
基于ESM的import/export语句依赖关系，与运行时状态无关 在构建阶段未使用到的代码进行删除 tree shaking会默认自动开启
实现原理：
服务器启动前扫描代码中用到的依赖
用Esbuild对依赖代码进行滚预打包
改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译 用Esbuild编译TS/JSX
优势： 编译速度提升10-100x
插件机制
Vite 由于在开发环境中使用的不是 Rollup，因此 Vite 有一个 Plugin Container 来模式 Rollup 插件机制，使得 Vite 可以支持一些 Rollup 插件。而在生产环境，Vite 直接使用 Rollup。
Vite进阶
- esbuild、rollup两个底层编译工具
- vite插件开发：抽离逻辑，易于拓展。通过hook在不同阶段插入自定义逻辑。
- 代码分割：并发请求，提高缓存命中率。
- SSR：优化首屏渲染和SEO优化。
- 深度底层标准
标题：Vite 基本概要 - 掘金
