Vite 是什么？
下一代前端开发与构建工具
快速冷启动服务器：极速的服务启动，使用原生 ESM 文件，无需打包
即时热模块更换（HMR）：无论应用程序大小如何，都始终极快的模块热重载
真正的按需编译
丰富的功能：支持 TypeScript，JSX，CSS 等开箱即用
通用的插件：在开发和构建之间共享 Rollup-superset 插件接口
原理
Esbuild：An extremely fast JavaScript bundler
基于浏览器原生 ES imports 的开发服务器
利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用
同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢
针对生产环境则可以把同一份代码用 rollup 打包
工作流程
Javascript 模块需求
// 声明
<script type="module" src="main.js"></script>
当 script.type 为 module 时，通过 src 及 import 导入的文件会发送 http 请求
拦截请求
import Vue from 'vue'
当通过 import 试图导入 node_modules 内的文件时，Vite 会对路径进行替换，因为在浏览器中只有 相对路径 和 绝对路径。
import Vue from '/@modules/vue'
解析 /@modules
{
"license": "MIT",
"main": "index.js",
"module": "dist/vue.runtime.esm-bundler.js",
"name": "vue",
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/vue-next.git"
},
"types": "dist/vue.d.ts",
"unpkg": "dist/vue.global.js",
"version": "3.0.5"
}
解析单文件组件
项目代码打包实体演示
处理 script/template/style
.vue 和 TSX 写法的解析区别
传统打包工具的dev-server
- 本地运行前需要加载所有模块文件并导出bundle才能展示页面
- 包括对每个文件导入/导出关系的解析
- 将各个模块排序、重写、关联
- 应用越大，开发服务的启动速度也越慢
- 代码分割只针对于生产环境构建
ES Module的特点
- 模块代码只在加载后执行
- 模块引用相同js只加载一次
- 模块是单例
- 模块可以请求加载其他模块
- 支持循环依赖
- 默认在严格模式下执行
- 不共享全局命名空间
- 模块顶级this的值是undefined
- 模块var声明不会添加到window
Vite与前端基建
基建怎么搞
文档建设
业务文档
技术文档
分享沉淀
新人文档
规范文档
团队规范
结合我们团队现状
编码规范
代码规范
命名规范
组件规范
流程规范
Git规范
项目搭建
分支管理
文档规范
代码review
工程化建设
项目工程化架构
基础库：Utils/UI等
模板仓库
Cli工具
组件管理
插件工具
自动化构建部署
Lint 检测
包检测
合法与安全性检测
Webhooks
打包编译
部署
通知企业微信群
埋点和监控
业务数据埋点与收集
技术埋点与收集
页面性能
安全性
开源规范
GIT规范/良好的提交备注
完整的说明文档
一致的开发环境和依赖
代码风格：代码结构清晰，代码抽象合理，文件名、变量名等命名合理易读
开源项目的功能要具有通用性
许可
团队愿景
有思考地追求新技术
分享与开源
开阔与创新
技术与业务共赢
沙雕与欢乐
偶尔一起摸鱼
谢谢
Thank you
Shanghai 2021.06.11
vadxq