Vite基本概要
前端工程的痛点
为什么需要构建工具？
- 模块化开发
- 资源编译
- 如ts、JSX等高级语言是浏览器不认识的，所以需要编译成JS
- 产物质量
- 考虑线上代码压缩体积，上线时用不上的需要剔除
- 语法兼容性
- 开发效率
- 比如改动代码后，需要立即看到效果
前端构建工具的意义
- 模块化方案 --> 提供模块加载方案 / 兼容不同模块规范
- 语法转译 --> 高级语法转译，如Sass、TypeScript / 资源加载，如图片、字体、worker
- 产物质量 --> 产物压缩、无用代码删除、语法降级
- 开发效率 --> 热更新
Vite概览
- 定位：新一代前端构建工具
- 两大组成部分：No-bundle开发服务，源文件无需打包；生产环境基于Rollup的Bundler
- 核心特征
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
Vite优势
浏览器原生ESM支持
两大要素
- script标签增加
type="module"属性 - 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild ———— 基于Golang开发的前端工具，性能极高，在Vite中被深度使用
Vite上手实战
1.项目初始化
npm i -g pnpm
# 初始化命令
pnpm create vite
#1.项目名称
#2.选择语言框架
#3. cd 命令进入到项目中
# 安装依赖
pnpm install
# 启动项目
npn run dev
# dev:开发阶段,启动项目
# build:项目打包
# preview:
2.使用 Sass/Scss & CSS Modules
3.使用 Scss & CSS Modules
4.使用静态资源
5.使用 HMR
无需额外配置，自动开启
6.生产环境 Tree Shaking
优化原理：
- 基于 ESM 的import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用的代码进行删除
arduino
复制代码
// CommonJS 格式做不到 Tree Shaking
// require 的部分可能依赖运行时计算的结果
四.Vite 整体架构
-
为什么要进行预打包？
- 避免 node_modules 过多的文件请求
- 将 CommonJS 格式转换为 ESM 格式
-
实现原理
-
服务启动前扫描代码中用到的依赖
-
用 Esbuild 对依赖代码进行预打包
-
改写 import 语句，指定依赖为构建产物路径
-
