这是我参与「第四届青训营 」笔记创作活动的第12天
本堂课重点内容
- 构建工具的意义
- Vite 概览介绍
- Vite 上手实战
- Vite 整体架构
- Vite 进阶路线
详细知识点介绍
构建工具的意义
- 模块化方案
- 提供模块加载方案
- 兼容不同模块规范
- 语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载,如图片、字体、worker
- 产物质量
- 产物压缩、无用代码删除、语法降级
- 开发效率
- 热更新
Vite概览
- 定位:新一代前端构建工具
- 两大组成部分:
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup 的 Bundler
- 核心特征
- 高性能, dev启动速度和热更新速度非常快!相比于Rollup和Webpack都有很大的提升
- 简单易用，开发者体验好
其中，高性能的实现解决了
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
这主要是由于以下两点引起的
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
当前行业内两大趋势——ESM & ESbuild
ESM
- 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- 两大要素:
- script标签增加type="module”属性
- 使用ESM模块导入导出语法
- Vite基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
ESbuild
- 基于Esbuild的编译性能优化，性能极高,在Vite中被深度使用
- Esbuild——基于Golang开发的前端工具,具备如下能力:
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
Vite内置Web构建能力，开箱即用
Vite上手使用
#提前安装
pnpmnpm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev
#启动完成后，打开浏览器访问对应地址即可
使用Sass/Scss & CSS Modules
使用Scss & CSS Modules
使用静态资源
使用HMR和Tree-shaking
- Tree-shaking优化原理: 1.基于ESM的import/export语句依赖关系，与运行时状态无关 2.在构建阶段将未使用到的代码进行删除
- Tree Shaking在Vite中无需配置,默认开启
- CommonJS 格式不能做到 Tree Shaking，require的部分可能依赖运行时计算的结果
Vite整体架构
关键技术:依赖预打包
- 为什么要进行预打包?
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
- 实现原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术:单文件编译
- 用Esbuild 编译TS/JSX
- 优势:编译速度提升10-100 x
- 局限性:
- 不支持类型检查
- 不支持语法降级到ES5
关键技术:代码压缩
Esbuild 作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术:插件机制
- 开发阶段->模拟Rollup 插件机制
- 生产环境->直接使用 Rollup
- 插件兼容性具体可查阅vite-rollup-plugins.patak.dev/
Vite进阶路线
- 查看双引擎文档
- 深入学习Vite插件开发
- 代码分割(拆包)
参考资料:
cn.vitejs.dev/config/buil…
rollupjs.org/guide/en/#o…
- 语法安全降级
参考资料:
@babel/preset-env文档
Vite官方降级插件文档
- 服务端渲染(SSR)
参考资料:
Vite-SSR文档
Vite官方ssr-demo项目使用Vite搭建SSR工程
- 深入了解底层标准
重点特性: C]S规范 ESM规范 HTTP 2.0特性
参考资料:
hacks.mozilla.org/2018/03/es-… https:/lantfu.me/posts/publish-esm-and-cjs
什么是PureESM?
