这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
Vite概述
定位: 新一代前端构建工具
两大组成部分
1.No-bundle 开发服务，源文件无需打包
2.生产环境基于 Rollup 的 Bundler
核心特征
1.高性能，dev 启动速度和热更新速度非常快!
2.简单易用，开发者体验好
Rollup -> Vite
启动时间: 2分15秒 -> 1.7 秒
更新时间: 23 秒 ->1秒以内
Webpack -> Vite
启动时间: 2分36秒 ->6 秒
热更新从 13 秒 ->1 秒以内
当前的一些构建工具的问题：
缓慢的启动 -> 项目编译等待成本高
缓慢的热更新 -> 修改代码后不能实时更新
两大行业的趋势：
全球浏览器对原生 ESM 的普遍支持(目前占比92% 以上)
基于原生语言(Go、Rust)编写前端编译工具链
如 Go 语言编写的Esbuild、 Rust 编写的 SWC
两大要素:
1.script 标签增加 type="module"属性
2.使用 ESM 模块导入导出语法
基于 Esbuild 的编译性能优化
基于Golang开发的前端工具，具备如下能力
1打包器Bundler
2编译器变压器
3压缩器 Minifier
性能极高，在 Vite 中被深度使用
Vite 开箱即用的功能等价于？
webpack
webpack-dev-servercss-loaderstyle-loader
less-loader
sass-loader
postcss-loader
file-loader
MiniCssExtract
PluginHTMLWebpackPlugin
vite的上手使用
生产环境 Tree Shaking
优化原理
1.基于 ESM 的 import/export 语句依赖关系，与运行时状态无关
2.在构建阶段将未使用到的代码进行删除
总结：Vite 给我最直观的印象，响应迅速，开箱即用
Vite整体架构
为什么要进行预打包?
1.避免 node modules 过多的文件请求
2.将 CommonJS 格式转换为 ESM 格式
实现原理
1.服务启动前扫描代码中用到的依赖2用 Esbuild 对依赖代码进行预打包3.改写 import 语句，指定依赖为预构建产物路径
