这是我参与「第五届青训营 」伴学笔记创作活动的第 15天
为什么需要构建工具？
前端构建的意义
- 模块化方案：提供模块化加载方案，兼容不同的模块规范（ESM、CommonJS、UMD）
- 语法转译：高级语法转译，如Sass,less,typescript,图片，字体等
- 产物质量：代码体积、代码性能、产物压缩，无用代码删除，语法降级
- 开发效率：热更新
Vite是什么
定位： 新一代前端构建工具
两大组成部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例：
当下构建工具的常见问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
- bundle 带来的性能开销
- JavaScript语言的性能瓶颈
Vite的优势
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化（性能极高，在Vite中被深度使用）
Esbuild基于Golang开发的前端工具，具备如下功能
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
Vite内置的Web构建能力
Vite开箱即用的功能等价于
- webpack-dev-server
- webpack
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
如何使用Vite
- 安装Vite
npm i -g pnpm - 初始化命令
pnpm create vite - 安装依赖
pnpm install - 启动项目
npm run dev
Vite整体架构
为什么要进行预打包?
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句,指定依赖为预构建产物路径
Vite插件开发
为什么需要插件机制
- 抽离核心逻辑
- 易于扩展
示例:
代码分割（拆包）
JS 编译工具（Babel）
出现的原因:
- JavaScript语法标准繁多,浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免：
- 上层解决方案：@vitejs/plugin-leacy
- 底层原理：借助Babel进行语法自动降级
- 提前注入Polyfill实现，如corejsregenerator-runtime
服务端渲染（SSR）
总结
学完这节课，让我对Vite有了新的理解和认识，引发了我对构建工具的深入思考
