这是我参与「第四届青训营 」笔记创作活动的的第14天
01.浅谈构建工具
为什么需要构建工具？
前端工程的痛点
前端构建工具的意义
02.Vite概要介绍
什么是Vite？
- 定位：新一代前端构建工具
- 两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
- 核心特征：
- 高性能，dev 启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例
当下问题
两大行业趋势
浏览器原生ESM支持
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于ESbuild的编译性能优化
ESbuild基于Golang开发，具备如下能力：
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
性能很高，在Vite中被深度使用
Vite内置的Web构建功能
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ···
03.Vite上手实战
项目初始化
使用Sass/Scss&Css Modules
使用Scss&Css Modules
使用静态资源
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持cn.vitejs.dev/guide/featu…
使用HMR
生产环境Tree Shaking
对Vite最直观的印象
- 响应迅速
- 开箱即用
04.Vite整体架构
关键技术：依赖预打包
-
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
-
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
- 优势：编译速度提升10-100x
- 局限性：不支持类型检查；不支持语法降级到ES5（最多降到ES6）
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
- 开发阶段：模拟Rollup插件机制
- 生产环境：直接使用Rollup
插件兼容性具体可查阅vite-rollup-plugins.patak.dev/
05.Vite进阶路线
深入双引擎
- 参考资料：esbuild官方文档和rollup官方文档
- 先了解基本使用,动手尝试各项常用配置
- 然后学习其插件开发
Vite插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
插件示例
参考资料
- Vite 插件开发文档
- 复杂度较低的插件：json加载插件
- 复杂度中等的插件：Eabuild接入插件
- 复杂度较高的插件：官方React插件
代码分割（拆包）
参考资料：
js编译工具Babel
参考资料：
语法安全降级
参考资料：
服务端渲染（SSR）
参考资料：
- Vite-SSR文档
- Vite官方ssr-demo项目
- 使用Vite搭建SSR工程
深入了解底层标准
参考资料：
