这是我参与「第四届青训营」笔记创作活动的第10天

Vite知识体系

浅谈构建工具

为什么需要构建工具

核心要素--资源

一般的Web前端开发过程中资源繁多，不能够很好的同意管理

模块化（ESM、CommonJS、UMD）

资源编译（高级语法的编译）

产物质量（代码体积、代码性能）

开发效率（热更新）

前端构建工具的意义

Snipaste_2022-08-14_09-49-11

Vite概要介绍

Vite是什么？

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

两大组成部分：

1、No-bundle开发服务，源文件无需打包

2、生产环境基于Rollup的Bundler

核心特征

1、高性能，dev启动速度和热更新速度非常快

2、简单易用，开发者体验好

案例:

Snipaste_2022-08-14_09-53-40

当下问题

缓慢的启动 -> 项目编译等待成本高

缓慢的热更新 -> 修改代码后不能实时更新

瓶颈：bundle带来的性能开销

Javascript语言的性能瓶颈

两大行业趋势：

全球浏览器对原生ESM的普遍支持（目前占比92%以上）两大要素:

1、script标签增加type='module'属性

2、使用ESM模块导入导出语法、

基于原生语言（Go、Rust）编写前端编译工具链
如Go语言编写的Esbuild、Rust编写的SWC

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

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

基于Esbuild的编译性能优化

Snipaste_2022-08-14_10-03-53

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 instalt
# 启动项目
npm run dev

Snipaste_2022-08-14_10-06-56

Snipaste_2022-08-14_10-07-30

响应迅速

开箱即用

Vite整体架构

Snipaste_2022-08-14_10-08-58

为什么要进行预打包？

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

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

实现原理:

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

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

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

用Esbuild编译TS/JSX

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

局限性:

不支持类型检查

不支持语法降级到 ES5

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

Vite知识体系 ｜ 青训营笔记