文章第一句话为“这是我参与「第四届青训营」笔记创作活动的第6天

Vite知识体系

01 浅谈构建工具

前端核心要素——资源：js，ts，jsx，css，scss……

模块化：ESM，CommonJS，UMD
资源编译：高级语法的编译。浏览器本身并不认识一些高级的语法，需要先编译
产物质量：代码体积、代码性能、兼容性（对移动端的兼容、对低版本浏览器的兼容）
开发效率：改动代码后立刻看到新效果

前端构建工具的意义

1.模块化方案：
- 1.提供模块加载方案
- 2.兼容不同模块规范
2.语法转移
- 1.高级语法转义，如Sass、TypeScript->如一些loader
- 2.资源加载，如图片、字体、worker
3.产物质量
- 产物压缩、无用代码删除、语法降级
开发效率
- 热更新->改动代码后立即看到代码效果

02 Vite概要介绍

定位：新一代前端构建工具

两大组成部分
- 1.No-bundle开发服务，源文件无需打包
- 2.生产环境基于Rollup的Bundler
核心特征
- 1.高性能：dev启动速度和热更新速度非常快
- 2.简单易用，开发者体验好
传统构建工具的问题：webpack，rollup……
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈在哪里？
- bundle带来的性能开销
- JavaScript语言的性能瓶颈（解释性、单线程）
两大行业趋势
- 浏览器对原生ESM的普遍支持（目前占比92%以上）
  
  1.script标签增加type="module"属性
  
  2.使用ESM模板导入导出语法

    优势：

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

-   基于原生语言(Go、Rust)编写前端编译工具链；如Go编写的Esbuild、Rust编写的SWC

    Esbuild具备如下能力：

    -   1.打包器Bundler->对标webpack
    -   2.编译器Transformer->对标Babel
    -   3.压缩器Minifier->Tensor、uglyfyjs

03 Vite上手实战

vite项目初始化：

#提前安装pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev

使用Sass/Scss & CSS Modules

使用静态资源

Vite内置了对于JSON、Worker、WASM资源的加载支持
使用HMR

能部分保留组件的内容
生产环境Tree Shaking

1.基于ESM的import/export语句依赖关系，与运行时状态无关

2.在构建阶段将未使用到的代码进行删除

vite给你最直观的印象：响应迅速、开箱即用

04 Vite整体架构

关键技术1：依赖预打包

为什么要进行预打包？

1.避免node_moudules过多的文件请求

2.将CommonJS格式转换为ESM格式

实现原理:

1.服务启动前扫描代码中用到的依赖

2.用ESbuild对依赖代码进行预打包

3.改写import语句，指定依赖为预构建产物路径

关键技术2：单文件编译

用Esbuild编译TS/JSX

优势：编译速度提升10-100x

局限性：

1.不支持类型检查

2.不支持语法降级到ES5

关键技术3：代码压缩

Esbuild作为默认压缩工具，代替terser\Uglify.js等压缩工具

关键技术4：插件机制

开发阶段->模拟Rollup插件机制

生产阶段->直接使用Rollup

05 Vite进阶路线

深入双引擎：

esbuild
rollup.js

参考资料：官方文档，写的很好

推荐学习顺序：先了解基本使用，动手尝试各项常用配置；然后学习其插件开发

为什么需要插件机制？

抽离核心逻辑
易于拓展

vite插件开发

先看已有插件的实现，再自己开发插件

代码分割（拆包）

JS编译工具（Babel）

为什么会出现？

JavaScript语法标准繁多，浏览器支持程度不一
开发者需要用到高级语法

语法安全降级

上层解决方案：@vitejs/plugin-legacy

底层原理：

借助Babel进行语法自动降级
提前注入Polyfill实现，如core-js、regenerator-runtime

服务端渲染（SSR）

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

深入了解磁层标准

CJS规范
ESM规范
HTTP2.0特性

未来有ESM大一统的趋势

Vite知识体系|青训营笔记