这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
上一篇文章学习了Vite前端工程的痛点、前端构建工具的意义、Vite概览和优势。讲完了基本的理论，这篇文章将介绍一下Vite的使用以及架构解析。
一、Vite上手使用
项目初始化
使用Sass/Scss & CSS Modules
使用静态资源
除了常见的图片格式，Vite 也内置了对于JSON、Worker、 WASM资源的加载支持。
使用HMR
生产环境Tree Shaking
优化原理:
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启!
Vite最直观的印象
- 响应迅速
- 开箱即用
二、Vite整体架构
关键技术:依赖预打包
为什么要进行预打包?
- 避免node_ modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术:单文件编译
用Esbuild编译TS/JSX
优势:编译速度提升10-100x
局限性:
- 不支持类型检查
- 不支持语法降级到 ES5
关键技术:代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术:插件机制
开发阶段-> 模拟 Rollup插件机制
生产环境->直接使用Rollup
三、Vite进阶路线
深入双引擎
先了解基本使用，动手尝试各项常用配置，然后学习其插件开发。
Vite插件开发
为什么需要插件机制?
- 抽离核心逻辑
- 易于拓展
通过上述的Hook，我们可以在不同的构建阶段插入自定义的逻辑。
插件示例
1.开发Vite插件
2.配置文件引入插件
JS编译工具(Babel)
Babel原理
出现的原因:
- JavaScript语法标准繁多.浏览器支持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题?
上层解决方案: @vitejs/plugin-legacy
底层原理
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现，如core-js、regenerator- runtime
服务端渲染(SSR)
一种常见的渲染模式，用于提升首屏性能和SEO优化。
深入了解底层标准
重点特性:
- CJS规范
- ESM规范
- HTTP 2.0特性
Vite 社区生态
Github 40k+ star (可参考webpack 61.3 K, rollup 21.8k),并且目前还在持续维护。
官方提供插件:
- @vitejs/plugin-vue,提供Vue3支持
- @vitejs/plugin-vue-jsx.提供Vue 3 JSX支持
- @vitejs/plugin-react,提供React支持
- @vitejs/plugin-legacy提供低版本浏览器降级支持
海量社区插件 github.com/vitejs/awes…
图众多框架内置
- SI
- Nuxt
- SvelteKit
- Astro
- Vitepress
三、总结
今天通过对Vite的使用和架构解析以及Vite插件的学习，我对Vite有了进一步的学习和了解。同时它对以后前端构建有着极大的好处和便利，我能够用它能够显著提升前端开发的效率。
