这是我参与「第五届青训营 」笔记创作活动的第9天
Vite是什么？
vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
前端工程化
模块化 ESM,CommonJS,UMO
- 模块加载方案
- 兼容模块
资源编译
- 语法转译
- 资源加载
产物质量
- 产物压缩
- 语法降级
开发效率
- 热更新
Vite优点
- 高性能，简单易用
- 两大组成部分：源文件无需打包，生产环境基于Rollup 的Bundler
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier
Vite安装+工具安装
使用说明：cn.vitejs.dev/guide/
- 使用 NPM:
npm create vite@latest - 使用 Yarn:
yarn create vite - 使用 PNPM:
pnpm create vite - 提前安装pnpm
npm i -g pnpm - 初始化命令
pnpm install - 启动项目
npm run dev - 安装sass
pnpm i sass -D
为什么要预打包
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
