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

一.为什么需要构建工具

前端开发的一些问题：

1. 模块化：JS的规范没有统一（ESM CommonJS UMD）
2. 资源编译：JSX 、 SCSS这些高级语法需要编译
3. 产物质量： 线上代码需要压缩、未使用的模块需要剔除
4. 开发效率

前端工程的痛点：

使用构建工具可以解决以上问题：

1. 一同模块加载方案，兼容不同模块规范
2. 语法转义：包裹高级语法转义、资源加载
3. 产物压缩、无用代码删除、语法降级
4. 热更新，支持改动代码后立即看到改动后的效果

前端构建工具的意义：

二.Vite是什么？Why Vite？

1. Vite简介

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

• 两大组成部分：

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

• 核心特征

  1. 高性能：启动时间和更新时间均高于Rollup和Webpack
  2. 简单易用：内置了很多开箱即用的构建能力

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

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

3. 基于ESbuild的编译性能优化

ESbuild基于Golang开发，具备如下能力：

1. 打包器Bundler
2. 编译器Transformer
3. 压缩器Minifier

性能很高，在Vite中被深度使用

4. Vite内置的Web构建功能

其开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin
• ···
• 所以它配置起来相比webpack要简单很多

三.Vite上手使用

1.项目初始化

2.使用Sass、Scss&Css Modules

3.使用静态资源

4.生产环境Tree Shaking

四.整体架构

1. 关键技术：依赖预打包

• 为什么要进行预打包？

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

• 实现原理

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

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

用Esbuild编译TS/JSX

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

局限性：不支持类型检查、不支持语法降级到ES5（最多降到ES6）

3. 关键技术：代码压缩

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

4. 关键技术：插件机制

• 开发阶段：模拟Rollup插件机制
• 生产环境：直接使用Rollup

五.Vite进阶路线

1.深入双引擎

1. 1. esbuild和rollup.js
   2. 了解基本使用,动手尝试常用配置
   3. 学习插件开发

2.Vite插件开发

3.代码分割（拆包）

4.js编译工具Babel

5.语法安全降级

6.服务端渲染（SSR）

7.深入了解底层标准

8.Vite社区生态

---