这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

14.1 关于构建工具

• 前端为什么需要构建工具？
• 前端的主要痛点：模块化、资源编译、产物质量、开发效率
• 构建工具解决了这些问题，为四个方面提供了各自的支持

14.2 Vite概览

• 新一代前端构建工具
• 两大组成部分
  • no-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler
• 核心特征
  • 高性能，dev启动和热更新快
  • 简单易用，开发者体验友好
• 传统的构建工具的问题：启动慢，热更新慢，开发者体验不好。原因：bundle性能开销，js语言性能瓶颈
• 两大行业趋势
  • 浏览器对原生ESM的普遍支持：script标签添加type='module'，Vite Dev Server基于此进行编译，可以省下打包的开销
  • 基于Esbuild的编译性能优化，esbuild是基于golang开发的，可以实现打包、编译、压缩，性能极高
• 内置的web构建能力非常丰富

14.3 Vite的使用

项目初始化

npm i -g pnpm
pnpm create vite
pnpm install
# 启动项目
npm run dev

三个命令：dev启动开发，build启动生产模式打包，preview启动生产模式包预览

接入css方案

接入sass，支持css module使用

pnpm install sass -D

引入静态资源

• 使用import引入路径
• 在src属性中使用
• 除了常见图片，Vite还支持JSON, Worker, WASM

关于HMR

• 热更新默认是自动开启的
• 修改某个组件不会影响其它组件的状态

生产环境Tree shaking

• 基于ESM的import/export语句依赖关系，与运行时状态无关（如果是require就不太行）
• 构建阶段将未使用的代码删除
• Tree shaking默认是开启的

总结

• 相应迅速
• 开箱即用

14.4 Vite整体架构

• 开发环境
• 生产环境
• 插件

依赖预打包

• 避免node_modules过多文件请求
• CommonJS转换为ESM格式
• 扫描依赖，Esbuild预打包，改写import

单文件编译

• Esbuild编译TS/JSX
• 但是Esbuild不支持类型检查
• Esbuild仅支持语法降级到ES6

代码压缩

• Esbuild用来进行压缩
• 可以在好压缩率的同时大幅减少耗时

插件机制

• 开发阶段模拟Rollup插件机制
• 生产阶段直接使用Rollup插件

14.5 Vite进阶路线

集成双引擎

• esbuild
• rollup.js
• 官方文档都非常详细，建议读一读
• 先了解基本使用，尝试常用配置

Vite插件开发

• 为什么需要插件机制？抽离核心逻辑（解耦），易于扩展
• 钩子函数：主要附加在四个阶段（服务启动、请求响应、热更新、服务关闭）
• 建议先看官方文档
• json插件，esbuild插件，React插件难度由简到难

代码分割（拆包）

• 如果只用一个包，无法并发请求，缓存的复用率低
• 模块分包，可以减少包改动，更高效
• 可以看rollup的拆包

关于babel

• JS语法标准繁多，浏览器支持程度不一
• 开发者需要使用高级语法
• 过程：代码转换为语法树，转换为低级语法树，再生成代码

关于语法安全降级

• 涉及到浏览器的兼容性
• 上层解决方案：插件@vitejs/plugin-legacy
• 底层原理：借助babel，提前注入polyfill

服务端渲染SSR

• 常见渲染模式
• 提升首屏性能和SEO优化
• Vite官方有SSR示例项目

底层标准

• CJS规范
• ESM规范
• HTTP 2.0特性

Vite社区生态

• github知名项目，还在持续维护
• 官方插件提供vue3支持，react支持，低版本浏览器支持
• 社区插件丰富
• 众多框架内置