这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
构建工具的意义？ 随着前端发展，涉及到的资源是越来越多，如何高效快速的进行资源管理问题避无可避，正是由于传统的资源管理方式所带来的一系列弊端，推荐了构建工具的诞生。
前端工程的痛点
模块化：ESM、CommonJS、UMD
资源编译：高级语法的编译
开发效率：热更新
前端构建工具的意义
模块化方案
提供模块加载方案
兼容不同模块规范
语法转译
高级语法转译
资源加载
产物质量
产物压缩
无用代码删除
语法降级
开发效率
热更新
Vite概要介绍
定位： 新一代前端构架工具
两大组成部分：
No-bundle开发服务
源文件无需打包
生产环境基于Rollup的Bundler
核心特征：
高性能，dev启动速度和热更新速度非常快
简单医易用,开发者体验好
传统构架工具遇到的问题
缓慢的启动=>项目编译等待成本告
缓慢的热更新=>修改代码后不能实时更新 瓶颈
bundle带来的性能开销
JS语言的性能瓶颈
Vite上手实战与架构解析
Vite项目初始化
项目初始化引入资源
使用HMR：无需额外配置，自动开启
生产环境Tree Shaking
Vite整体架构
关键技术：依赖预打包
进行预打包的原因
避免node_moudles过多的文件请求
将COmmonJs格式转换为ESM格式
实现原理：
服务器启动前扫描代码中用到的依赖
用Esbuild对依赖代码进行滚预打包
改写import语句，指定依赖为预构建产物路径
//改写前 import React from "react"; //改写后 import React from '/node_nodules/.vite/react.js'
关键技术：单文件编译 用Esbuild编译TS/JSX
优势： 编译速度提升10-100x
局限性
不支持类型检查
不支持语法降级为ES5
关键技术：代码压缩 Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
Vite进阶路线
深入双引擎
Esbuild
Rollup
插件机制
抽离核心逻辑
易于拓展
了解Vite社区生态
Vite社区插件
