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

Vite概要介绍

前端工程的痛点

前端构建工具的意义

Vite 概览

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

两大组成部分:

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

核心特征

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

Vite 业界案例

Vite 优势

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

无需打包项目源代码

天然的按需加载

可以利用文件级的浏览器缓存

Vite开箱即用的功能等价于

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

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.在构建阶段将未使用到的代码进行删除

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

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

• 响应迅速

• 开箱即用

Vite整体架构

为什么要进行预打包？

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

实现原理:

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

用 Esbuild 编译 TS/JSX

优势: 编译速度提升 10-100

局限性: 不支持类型检查不支持语法降级到 ES5

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

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

生产环境 -> 直接使用 Rollup

Vite进阶

esbuild、rollup两个底层编译工具
vite插件开发：抽离逻辑，易于拓展。通过hook在不同阶段插入自定义逻辑。
代码分割：并发请求，提高缓存命中率。
SSR：优化首屏渲染和SEO优化。
深度底层标准
底层工具

参考

Vite 知识体系

【前端专场学习资料五】第五届字节跳动青训营 - 掘金

Vite 知识体系.pptx

Vite知识体系 | 青训营笔记