Vite知识体系 | 青训营

攻城狮的大师兄
98 阅读5分钟

这是参加第六届青训营第四次笔记，以下是课程纲要以及知识要点，以及一丢丢自己的理解。简单的记录一下，方便后面回头复盘。复盘再深入更新思考吧。至于我说的东西可能不对，但不喜勿喷。如果，愿意帮忙纠正，还是很欢迎的。

一、 浅谈构建工具

1. 为什么需要构建工具？
  • 模块化：ESM、CommonJS、UMD
  • 资源编译：高级语法的编译
  • 产物质量：代码体积、代码性能
  • 开发效率：热更新
2. 前端构建工具的意义
  • 模块化方案 -> 提供模块加载方案；兼容不同模块规范
  • 语法转义 -> 高级语法转译，如Sass、TypeScript；资源加载，如入片、字体、worker
  • 产物质量 -> 产物压缩、无用代码删除、语法降级
  • 开发效率 -> 热更新

二、Vite概要介绍

1. Vite是什么？ Why Vite？
  • 定位： 新一代前端构建工具
  • 两大组成部分：
    • No-bundle开发服务，源文件无需打包
    • 生产环境基于Rollup的Bundler
  • 核心特征：
    • 高性能，dev启动速度和热更新速度非常快。
    • 简单易用，开发者体验好
2. 当下问题……（开发体验问题日渐显露）
  • parcel、webpack、rollup、browserify
  • 启动缓慢->项目编译等待成本高
  • 热更新缓慢-> 修改代码后不能试试更新
3. 瓶颈在哪里？
  • bundle带来的性能开销
  • JavaScript语言的性能瓶颈
4. 两大行业趋势
  • 全球浏览器（Opera、chrome、IE、edge、firefox、safari、）对原生ESM的普遍支持（目前占比92%以上）
  • 基于原生语言（Go、Rust）编写前端编译工具链
  • 如Go语言编写的Esbuild、Rust编写的SWC
5. 浏览器原生ESM支持（module的两大要素）
  • script标签增加type="module"属性
  • 使用ESM模块导入导出语法
6. 基于原生ESM的开发服务优势
  • 无需打包项目源代码
  • 天然的按需加载
  • 可以利用文件级的浏览器缓存
7. 基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具，具备如下能力：

  • 打包器Bundler
  • 编译器Transformer
  • 压缩器Minifier
  • 性能极高，在Vite中被深度使用
8. 内置的Web构建能力

Vite开箱即用的功能等价与

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

三、Vite上手实战

1. 项目初始化
# 提前安装 pnpm
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev
启动完成后，打开浏览器访问对应地址即可
2. React项目中使用Sass/Scss & CSS Modules
# 安装Sass
pnpm i sass -D

# 引用
import styles from './index.mpdule.scss';

# 使用
<div className={styles.header}>This is Header</div>

# index.module.scss文件内容
.header{
  color: red;
}
3. 使用静态资源
# 在使用文件夹中
import logo form './logo.svg';

# dom中
<img src={logo} alt="" />

除常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持

4. 使用HMR

vite无需额外配置，自动开启

5. 生产环境 Tree Shaking

vite无需配置，默认开始 优化原理：

  • 基于ESM的import/export语句依赖关系，与运行时状态无关
  • 在构建阶段将未使用到的代码进行删除
6. Vite给你最直观的印象如何？
  • 响应迅速
  • 开箱即用

四、Vite整体架构

1. 关键技术：单文件编译

用Esbuild编译TS/JSX 优势：编译速度提升10 - 100x 局限性：不支持类型检查；不支持语法降级到ES5

2. 关键技术：代码压缩

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

3. 关键技术：插件机制

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

五、 Vite进阶路线

1. 深入双引擎
  • esbuild —— es6
  • rollupjs 学习顺序 先了解基本使用，动手尝试各项常用配置；然后学习其插件开发。
2. Vite插件开发

为什么需要插件机制？

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

参考资料 Vite插件开发文档 复杂度较低的插件： json加载插件 复杂度中等的插件：Esbuild接入插件 复杂度较高的插件：官方React插件 先看文档，过一遍插件钩子功能，然后多学习其他插件的实现，掌握套路。

3. 代码分割（拆包）

问题： 无法进行并发请求； 缓存复用率低

4. JS编译工具（Babel）

出现原因：

  • JavaScript语法标准繁多，浏览器支持程度不一；
  • 开发者需要用到高级语法 参考资料：babel官方站点，babel插件手册
5. 语法安全降级

以Promise语法为例， IE11没有支持

如何在构建产物中避免这列问题？

  • 上层解决方案：@vitejs/plugin-legacy
  • 底层原理： 借助Babel进行语法自动降级； 提前注入Polyfill实现，如core-js，regenerator-runtime

参考资料： @babel/preser-env文档 Vite官方降级插件文档

6. 服务端渲染SSR

一种常见的渲染模式，用于提升首屏性能和SEO优化。 图二

7. 深入了解底层标准

图三

8. Vite社区生态

图四

学习建议以及总结：这个目前我也没什么想法，毕竟我知道的不多。但是，最初接触到Vite的时候感觉最明显的就是运行速度超级快。
    
希望后面工程化，可以深入学习一下。webpack也不能落下，也要学。毕竟Vite有做了封装，好多东西都没有真实感触了。

不要急，慢慢来。

avatar
文章
阅读
粉丝