前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
Vite概览
定位：新一代前端构建工具
两大组成分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例
当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
浏览器原生ESM支持
两大要素：
- script标签增加type="module"属性
- 使用ESM模块导入导出语法
基于原生ESm的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
使用
项目初始化
提前安装pnpm
npm i -g pnpm
初始化命令
pnpm create vite
安装依赖
pnpm install
启动项目
npm run dev
后续操作
启动完成后，打开浏览器访问对应地址即可
生产环境Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启
Vite整体架构
关键技术：单文件编译（用Esbuild编译TS/JSX）
优势：
编译速度提升10-100x
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
- 开发阶段 -> 模拟Rollup插件机制
- 生产环境 -> 直接使用Rollup
Vite插件开发
插件机制优点：
- 抽离核心逻辑
- 易于拓展
Vite插件开发阶段
代码分割（拆包）
JS编译工具（Babel） 出现的原因：
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题？
上层解决方案：@vitejs/plugin-legacy
底层原理
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现，如core-js、regenerator-runtime
服务端渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化
