这是我参与「第五届青训营 」伴学笔记创作活动的第9天
2、Vite概要介绍 2.1、Vite是什么？Why Vite?
定位： 新一代前端构架工具
两大组成部分：
No-bundle开发服务，源文件无需打包
生产环境基于Rollup的Bundler
核心特征：
高性能，dev启动速度和热更新速度非常快
简单医易用,开发者体验好
传统构架工具遇到的问题
缓慢的启动=>项目编译等待成本告
缓慢的热更新=>修改代码后不能实时更新
瓶颈
bundle带来的性能开销
JS语言的性能瓶颈
3、Vite上手实战 3.1、Vite项目初始化
提前安装 pnpm (需管理员权限)
npm i -g pnpm
初始化命令
pnpm create vite
安装依赖
pnpm install
项目启动
npm run dev
3.2、使用Sass/Scss & Css Modules
安装Sass
pnpm i sass -D
目录结构
index.module.scss
.header {
color: red;
}
index.tsx
import React from 'react';
import styles from './index.module.scss';
export function Header(){
return <div className={styles.header}>Header</div>
}
效果：页面Header文字表现为红色
3.3、使用静态资源
用法：比如图片直接引入在需要的地方加上就即可
3.4、使用HMR
无需额外配置自动开启 3.5、生产环境 Tree Shaking
Tree Shaking 在Vite中 无需配置，自动开启
优化原理
基于ESN的import/export 语句依赖关系，与运行时状态无关
在构架阶段将为使用道德代码进行删除
理解：在打包时项目中引用单位使用的部分不会进行打包处理
打包
pnpm run build
4、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等压缩工具 关键技术：插件机制
开发阶段：使用Rollup插件机制
生产环境： 直接使用Rollup
插件兼容性查阅传送
5、Vite进阶路线 深入双引擎
Esbuild
Rollup
学习顺序
先了解基本使用，动手尝试各项常用配置
然后学习其插件开发
为什么需要插件机制？
抽离核心逻辑
易于拓展
Vite插件开发
服务启动阶段
config
configResolved
options
configureServer
buildStart
请求相应阶段
transformIndexHtml
resolveId => load => transform
热更新阶段： handleHotUpdate
服务关闭阶段
buildEnd
closeBundle
参考资料
Vite插件开发文档
复杂度较低的插件：json加载插件
复杂度中等的插件：Esbuild接入插件
复杂度较高的插件：官方React插件
代码分割（拆包）
参考资料
官方中文文档
rollup.js
JS编译工具（Bable）
出现原因：
JS语法标繁多，浏览器支持程度不一
开发者需要用到高级语法
参考资料：
babe官方站点
bable插件手册
语法安全降级
如何避免
上层解决方案：@vite.js/plugin-legacy
底层解决
借助Bable进行语法自动降级
提前注入Polyfill实现，如core-js,regenerator-runtime
参考资料
@bable/preset-env文档
Vite官方降级插件文档
服务器渲染
一种常见的渲染模式，用于提升首屏性能和SEO优化
参考资料
Vite-SSR
深入了解底层标准
CJS规范
ESM规范
HTTP2.0特性
参考资料
ES modules: A cartoon deep-dive - Mozilla Hacks - the Web developer blog
Publish ESM and CJS in a single package
什么是PureESM
