这是我参与「第四届青训营」笔记创作活动的第10天
该部分笔记记录了Vite的优点以及基于Vite的Create-Vite的使用。
构建工具
前端工程的痛点
前端核心要素：
JS、TS、JSX、CSS、SCSS、LESS、PNG、WEBP...
但浏览器只能识别HTML、CSS、JS，我们要怎么将我们写的代码转换为浏览器能够识别的呢？
产物质量
在工作的时候代码体积、代码性能十分重要
开发效率
如果没有构建工具，开发效率和体验无法完成
构建工具的意义
常见构建工具：webpack、rollup、parcel、esbuild、vite等
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转移，例如sass、ts
- 资源加载，例如图片、字体等
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
什么是Vite
Vite概览
定位:
新一代前端构建工具
两大组成部分
1.No-bundle开发服务，源文件无需打包 2.生产环境基于Rollup的Bundler
核心特征
1.高性能，dev启动速度和热更新速度非常快! 2.简单易用，开发者体验好
浏览器原生ESM支持
两大要素
1.script标签增加type="module"属性
2.使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源码
- 天然的按需加载（即先打开服务器，需要什么就加载什么）
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild-基于Golang开发的前端工具，具备如下能力:
- 打包器Bundler
- 编译器Transformer 性能极高，在Vite中被深度使用
- 压缩器Minifier
如何使用Vite
提前安装 pnpm
npm i -g pnpm
初始化命令
pnpm create vite
安装依赖
pnpm install
启动项目
npm run dev
Vite整体架构
依赖预打包
为什么要进行预打包？
1.避免node_modules过多的文件请求 2.将CommonJS格式转换为ESM格式
实现原理:
1服务启动前扫描代码中用到的依赖 2.用Esbuild对依赖代码进行预打包 3.改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
优势:编译速度提升10-100x 局限性:
- 不支持类型检查
- 不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglfiy.js等压缩工具
插件机制
开发阶段 - > 模拟Rollup插件机制
生产环境 - > 直接使用Rollup
Vite进阶
深入双引擎
- esbuild
- rollup.js
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置
- 然后学习其插件开发
Vite插件开发
为什么需要插件机制?
- 抽离核心逻辑
- 易于拓展
JS编译工具（Babel）
出现的原因:
- JavaScript语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题?
-
上层解决方案: @vitejs/plugin-legacy
-
底层原理
- 借助Babel 进行语法自动降级
- 提前注入 Polyfill 实现，如 core-js、regenerator-runtime
