前端工程的痛点

模块化
资源编译
产物质量
开发效率

前端构架工具的意义

模块化的方案
语法的转译
产物质量
开发效率

vite

定义：新一代的前端构架工具

组成部分：

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

优势：高性能、简单便捷

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

1.打包器Builder

2.编译器Transformer

3.压缩器Minifier

Vite的使用

1.项目初始化

①需要提前安装pnpm（npm i -g pnpm）

②初始化命令(pnpm create vite)

③安装依赖（pnpm install）

④启动项目（npm run dev）

生产环境Tree Shaking

优化原理

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

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

Vite的整体架构

关键技术：依赖预打包

why：

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

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

//改写前：
import React from "react";
//改写后
import React from '/node_modules/.vite/react.js'

关键技术：单文件编译

用Esbuild编译TS/JSX

优势：编译速度提升

局限:

不支持类型的检查
不支持语法降级到ES5

关键技术：代码压缩

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

深入双引擎学习

esbuild和rollup.js

顺序建议：

先要了解基本的使用，动手尝试各项的常用配置
然后学习插件开发

vite的学习笔记 | 青训营