Vite知识体系｜ 青训营

内容大纲

1. 浅谈构建工具
2. Vite概要介绍
3. vite 上手实战
4. Vite整体架构
5. vite进阶路线
6. 前端基本概要

为什么需要构建工具？

前端工程的痛点

• 模块化
  • ESM、CommonJS、UMD
• 资源编译
  • 高级语法的编译
• 产物质量
  • 代码体积、代码性能
• 开发效率
  • 热更新

前端构建工具的意义

Vite是什么? Why

Vite预览

🚩定位:新一代前端构建工具
两大组成部分:

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup 的 Bundler

核心特征:

1. 高性能,dev启动速度和热更新速度非常快!
2. 简单易用，开发者体验好

当下问题

基于原生ESM的开发服务优势

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

内置的Web 构建能力

Vite 开箱即用的功能等价于

webpack
webpack-dev-server
css-loader
style-loader
less-loader
sass-loader
postcss-loader
file-loader
MiniCssExtractPlugin
HTMLWebpackPlugin

Vite上手实战与架构解析

项目初始化

初始化

使用Sass/Scss & CSS Modules

使用静态资源

除了常见的图片格式, Vite 也内置了对于JSON、Worker、WASM资源的加载支持
https://cn.vitejs.dev/guide/features.html#static-assets

使用HMR

无需额外配置，自动开启

生产环境Tree Shaking

优化原理:

1. 基于ESM的import/export语句依赖关系，与运行时状态无关
2. 在构建阶段将未使用到的代码进行删除

Tree Shaking在 Vite中无需配置，默认开启!

Vite 给你最直观的印象如何?

• 响应迅速
• 开箱即用

Vite 整体架构

关键技术:依赖预打包

为什么要进行预打包?

1. 避免node_modules过多的文件请求
2. 将CommonJS格式转换为ESM格式

实现原理？

1. 服务启动前扫描代码中用到的依赖
2. 用Esbuild对依赖代码进行预打包
3. 改写import语句，指定依赖为预构建产物路径

关键技术:单文件编译

用Esbuild 编译TS/JSX

• 优势:编译速度提升10-100 x
• 局限性:
  • 不支持类型检查
  • 不支持语法降级到ES5

关键技术:代码压缩

Esbuild 作为默认压缩工具，替换传统的Terser.Uglify.js 等压缩工具

关键技术:插件机制

Vite进阶路线

深入双引擎

Esbuild

esbuild - An extremely fast bundler for the web

Rollup

Rollup

推荐学习顺序:

• 先了解基本使用,动手尝试各项常用配置;
• 然后学习其插件开发。

插件开发

为什么需要插件机制?

• 抽离核心逻辑
• 易于拓展

插件示例

参考文档

Vite插件开发文档
复杂度较低的插件: json加载插件
复杂度中等的插件:Esbuild接入插件
复杂度较高的插件:官方React插件

先看文档,过一遍插件钩子的功能，然后多学习其它插件的实现，掌握套路

代码分割(拆包)

https://cn.vitejs.dev/config/build-options.html#build-rollupoptions
https://rollupjs.org/configuration-options/#output-manualchunks

JS编译工具(Babel)

What is Babel? · Babel
babel插件手册
babel-handbook/translations/zh-Hans/plugin-handbook.md at master · jamiebuilds/babel-handbook

语法安全降级

https://babeljs.io/docs/babel-preset-env
https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

服务端渲染(SSR)

https://cn.vitejs.dev/guide/ssr.html
https://github.com/vitejs/vite/tree/main/playground/ssr-react
https://juejin.cn/book/7050063811973218341/section/7066612265536978981

vite 社区生态

https://github.com/vitejs/awesome-vite