• 这是我参与第五届青训营伴学笔记创作活动的第16天
• 当下构建工具问题
  • 缓慢启动
  • 缓慢热更新
• Vite的介绍 上手 框架结构进阶路线等知识的介绍

浅谈构建工具

• 前端资源种类各种各样（JS TS JSX CSS SCSS LESS PBG JPEG WBPG...） 主要存在下列问题
  • 模块化 ESM CommonJS UMD
  • 资源编译 高级语法的编译
  • 产物质量 代码体积 代码性能
  • 开发效率 热更新

---

• 构建工具的意义

Vite介绍

• 新一代前端构建工具
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler

---

• 核心特征
  • 高性能，dev启动速度和热更新非常快
  • 简单易用，开发者体验好

---

• 两大行业趋势
  • 全球浏览器对ESM的普遍支持占92%以上
    • script标签增加type = “module” 属性
    • 使用ESM模块导入导出语法
    • 优势
      • 无需打包项目源代码
      • 天然按需加载
      • 可以利用文件级的浏览器缓存
  • 基于Go Rust编写的前端编译工具链（ESbuild SWC）
    • 包含打包器 Bundle 编译器 Transformer 压缩器 Minifier
    • 性能极高 在Vite中深度使用

---

• 内置的Web构建能力

Vite上手

项目初始化

• 全局安装pnpmnpm i -g pnpm
• 初始化vite项目 pnpm create vite
• 安装依赖 pnpm install
• 启动 pnpm run dev

使用Sass/Scss & CSS Modules

• 安装Sasspnpm i sass -D

静态资源文件 assets

• 除了常见的图片格式，Vite也内置了对于JSON Worker WASM资源的加载支持

生产化境Tree Shaking

• 基于ESM的import/export 语句依赖关系，与运行时状态无关
• 在构建阶段将未使用的代码进行删除
  • 无需配置，默认开启

Vite整体架构

单文件编译

• ESbuild编译TS/JSX
• 优势
  • 编译速度提升10-100x
• 局限
  • 不支持类型检查
  • 不支持语法降级到ES5

代码压缩

• Esbuild作为默认压缩工具，替换传统的Terser Uglify.js等压缩工具

插件机制

• 开发阶段->模拟Rollup插件机制
• 生产环境->直接使用Rollup

Vite进阶路线

深度双引擎

插件开发

- 抽离核心逻辑
- 易于扩展
- ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/846b4da7ddb84c35a09aff7a0ed61600~tplv-k3u1fbpfcp-watermark.image?)
- ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d02d69945a584de58ede82c11c2a4c08~tplv-k3u1fbpfcp-watermark.image?)

---

代码分割（拆包）

JS编译器（Babel）

- JS语法标准繁多，浏览器支持程度不一
- 开发者需要用到高级语法
- ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c373d02283404b47a1a5994ece9501e1~tplv-k3u1fbpfcp-watermark.image?)

---

语法安全降级

• 问题
  • 
• 解决方案
  • 

---

服务端渲染SSR

• 

---

深度了解底层标准

• 

---

Vite社区生态

•