Vite知识体系 | 青训营笔记

Charlottex_x
130 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第11天

浅谈构建工具

前端工程的痛点

image.png

前端构建工具的意义

  1. 模块化方案 -----> 提供模块加载方案;兼容不同模块规范

  2. 语法转译 -----> 高级语法转译，如Sass、TypeScript;资源加载，如图片、字体、worker

  3. 产物质量 -----> 产物压缩、无用代码删除、语法降级

  4. 开发效率 -----> 热更新

Vite 概要介绍

Vite是什么？为什么选择Vite？

定位： 新一代前端构建工具

两大组成部分：

  1. No-bundle 开发服务，源文件无需打包

  2. 生产环境基于Rollup的Bundler

核心特征：

  1. 高性能，dev启动速度和热更新速度非常快！

  2. 简单易用，开发者体验好

业界案例

image.png

当下问题

image.png

两大行业趋势

  1. 全球浏览器对原生ESM的普遍支持（目前占比92%以上）

image.png

  1. 基于原生语言（Go、Rust）编写前端编译工具链

  2. 如Go语言编写的Esbuild、Rust编写的SWC

image.png

浏览器原生ESM支持

两大要素：

  1. script标签增加type="module"属性

image.png

  1. 使用ESM模块导入导出语法

image.png

基于原生ESM的开发服务优势

  • 无需打包项目源代码

  • 天然的按需加载

  • 可以利用文件级的浏览器缓存

image.png

基于Esbuild的编译性能优化

image.png

Esbuild —— 基于Golang开发的前端工具，具备如下能力：

  1. 打包器 Bundler
  2. 编译器 Transformer
  3. 压缩器 MInifier
  • 性能极高，在Vite中被深度使用

内置Web构建能力

Vite 开箱即用的功能等价于

  • Webpack

  • Webpack-dev-server

  • css-loader

  • style-loader

  • less-loader

  • sass-loader

  • postcss-loader

  • file-loader

  • MiniCssExtractPlugin

  • HTMLWebpackPlugin

  • ......

image.png

Vite 上手实战

项目初始化

#提前安装 pnpm
npm i -g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm install
#启动项目
npm run dev

image.png

启动完成后，打开浏览器访问对应地址即可

使用Sass/Scss&CSS Modules

image.png

使用Scss & CSS Modules

image.png

使用静态资源

image.png

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

使用HMR

无需额外配置，自动开启

image.png

生产环境 Tree Shaking

image.png

优化原理：

  • 基于 ESM 的 import/export 语句依赖关系，与运行时状态无关

  • 在构建阶段将未使用到的代码进行删除

image.png

Tree Shaking 在 Vite 中无需配置，默认开启！

Vite 给你最直观的印象如何？

  • 响应迅速

  • 开箱即用

Vite 整体架构

image.png

关键技术：依赖预打包

image.png

  • 为什么要进行预打包？

    • 避免 node_modules 过多的文件请求

    • 将 CommonJS 格式转化为 ESM 格式

  • 实现原理：

    • 服务启动前扫描代码中用到的依赖

    • 用 Esbuild 对依赖代码进行预打包

    • 改写 import 语句，指定依赖为预构建产物 路径

image.png

关键技术：单文件编译

用 Esbuild 编译 TS/JSX

image.png

优势：编译速度提升 10-100x

局限性：

  • 不支持类型检查

  • 不支持语法降级到ES5

image.png

关键技术：代码压缩

image.png

关键技术：插件机制

image.png

开发阶段 -> 模拟 Rollup 插件机制

生产环境 -> 直接使用 Rolluo

image.png 插件兼容性具体可查阅 Vite Rollup Plugins

Vite 进阶路线

参考资料：

Esbuild 官方文档

image.png

Rollup.js 官方文档

image.png

推荐学习顺序：

  • 先了解基本使用，动手尝试各项常用配置

  • 然后学习其插件开发

Vite 插件开发

为什么需要插件机制？

  • 抽离核心逻辑

  • 易于拓展

image.png

插件示例

image.png

参考资料：

先看一遍文档，过一遍插件钩子功能

然后多学习其他插件的实现，掌握套路

-Vite插件官方文档

代码分割（拆包）

image.png

参考资料：

Rollup.js 官方文档

image.png

JS编译工具(Babel)

image.png

Babel 原理

出现的原因：

  • JavaScript 语法标准繁多，浏览器支持程度不一

  • 开发者需要用到高级语法

参考资料：

语法安全降级

image.png

image.png

参考资料：

服务端渲染(SSR)

image.png

参考资料：

深入了解底层标准

image.png

参考资料：

Vite 社区生态

海量社区插件

image.png

avatar
文章
阅读
粉丝