构建工具：
为什么需要构建工具
前端工程存在一些痛点：
- 模块化
- 资源编译
- 产物质量
- 开发效率
前端构建工具的意义：
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
- 产物压缩、无用代码删除、语法降级
开发效率
- 热更新
Vite：
什么是Vite
●定位:新一代前端构建工具
两大组成部分:
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup 的Bundler
目核心特征
- 高性能，dev启动速度和热更新速度非常快!
- 简单易用，开发者体验好
当下问题
- 缓慢的启动==>项目编译等待成本高.
- 缓慢的热更新==>修改代码后不能实时更新
浏览器原生ESM支持
两大要素:
- script标签增加type= 'module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild一基 于Golang开发的前端工具，具备如下能力:
- 1.打包器Bundler
- 2.编译器Transformer ==> 性能极高，在Vite中被深度使用
- 3.压缩器Minifier
内置的Web构建能力
Vite开箱即用的功能等价于:
- webpack
- webpack-dev-server
- CSS- loader
- style-loader
- less- loader
- sass-loader
- postcss- loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
Vite上手
#提前安装pnpm npm i -9 pnpm #初始化命令 pnpm create vite #安装依赖 pnpm install #提前安装pnpm npm i -9 pnpm #初始化命令 pnpm create vite #安装依赖 pnpm install #启动项目 npm run dev输入初始化参数
Project name: ... vite-project SeLect a f ramework :> react SeLect a variant: > - Use arrow-keys. Return to submit. react react-ts生产环境：
优化原理: .
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite给你最直观的印象如何：
- 响应迅速
- 开箱即用
Vite整体架构
为什么要进行预打包:
- 避免node_ modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
用Esbuild编译TS/JSX
优势:
- 编译速度提升10-100x
局限性:
- 间不支持类型检查
- 不支持语法降级到 ES5
Vite进阶路线：
参考资料:
- Esbuild官方文档
- Rollup官方文档
推荐学习顺序:
- 先了解基本使用，动手尝试各项常用配置;
- 然后学习其插件开发。
为什么需要插件机制：
- 抽离核心逻辑
- 易于拓展
Vite插件开发：
参考资料:
- Vite插件开发文档
- 复杂度较低的插件: json加载插件
- 复杂度中等的插件: Esbuild接入插件
- 复杂度较高的插件:宜方React插件
先看文档，过一遍插件钩子的功能 然后多学习其它插件的实现，掌握套路
代码分割(拆包)
参考资料: cn.vitejs. dev/config/build- options. html#build- rollupoptions ollupjs.org/guide/en/#o…
JS编译工具( Babel)
出现的原因:
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
参考资料: babel宜 方站点babel插件手册
