这是我参与「第四届青训营 」笔记创作活动的第5天
为什么需要构建工具
核心要素为资源
- 模块化
把项目拆分成不同的模块，进行不同的维护 - 资源编译
浏览器的标准远远赶不上标准 - 产物质量
代码体积，和代码的性能 - 开发效率
热更新
构建工具的意义
根据前面四种原因，构建工具分别提出来几种解决方案
1.模块化方案 ——提供模块家在方案，兼容不同模块规范
2.语法转译 —— 高级语法转译 资源加载
3.产物质量 —— 产物研所，删除无用代码
4. 开发效率 —— 热更新
Vite 概览
核心特征
- 高性能 .dev 启动速度和热更新速度非常快
- 简单易用，开发者体验好
传统工具的缺点：
- 缓慢的启动 -> 项目编译等待成本高
- 缓慢的热更新 -> 修改代码后不能实时更新
瓶颈：
- bundle带来的性能开销
- js是单线程语言，无法提供多线程性能优化
主要原因也是全球浏览器对原生esm的支持普遍上升
浏览器支持使用ESM模块导入的语法
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级浏览器缓存
基于Esbuild 的编译性能优化
Vite 对 js/ts 的处理没有使用如 glup, rollup 等传统打包工具，而是使用了 esbuild。esbuild 是一个全新的js打包工具，底层使用了go，大量使用了并行操作，可以充分利用CPU资源。esbuild支持如babel, 压缩等的功能
** 性能极高，在Vite中被深度使用 **
如何使用vite？
项目初始化和 简单的运行命令
npm i -g pnpm
pnpm create vite
npm run dev
总结：使用vite进行项目构建能使开发项目的速度得到提升，各种安装工具包的方便使用更是深入人心 ，vite将会是我们今后开发的主力构建工具。
