Vite知识体系|青训营笔记

同乐
131 阅读2分钟

Vite知识体系|青训营笔记

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

为什么需要构建工具

前端工程的痛点

核心要素 => 资源

  • 模块化
    • ESM、CommonJS、UMD
  • 资源编译
    • 高级语法编译
  • 产物质量
    • 代码体积、代码性能
  • 开发效率
    • 热更新

前端构建工具的意义

  • 模块化方案
    • 提供模块加载方案
    • 兼容不同模块规范
  • 语法转译
    • 高级语法转译，如Sass、TypeScript
    • 资源加载，如图片、字体、worker
  • 产物质量
    • 产物压缩、无用代码删除
    • 语法降级
  • 开发效率
    • 热更新

Vite是什么？ Why Vite？

Vite概览

  • 定位：新一代前端构建工具
  • 两大组成部分
    • No-bundle开发服务，源文件无需打包
    • 生产环境基于Rollup的Bundler
  • 核心特征
    • 高性能，dev启动速度和热更新速度非常快（响应迅速）
    • 简单易用，开发者体验好（开箱即用）

当下问题

  • 缓慢的启动 => 项目编译等待成本高
  • 缓慢的热更新 =>修改代码后不能实时更新
  • 瓶颈
    • bundle带来的性能开销
    • JavaScript语言的性能瓶颈

两大行业趋势

  • 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
    • 两大要素
      • scrip标签增加type="module"属性
      • 使用ESM模块导入导出语法
  • 基于原生语言（Go、Rust）编写前端编译工具链
    • 如Go语言编写的Esbuild、Rust编写的SWC

Vite优势

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

    • 无需打包项目源码

    • 天然的按需加载

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

  • 基于Esbuild的编译性能优化

    • 打包器Bundler
    • 编译器Transformer
    • 压缩器Minifier

  • 内置的Web构建能力

    • Vite开箱即用的功能丰富

进阶路线

  • 深入双引擎
  • Vite插件开发
    • 为什么需要插件机制
      • 抽离核心逻辑
      • 易于拓展
    • 先看文档，过一遍插件钩子的功能，然后多学习其他插件的实现，掌握套路
  • 代码分割（拆包）
    • 问题：
      • 无法进行并发请求
      • 缓存复用率低
  • JS编译工具（Babel）
    • 出现原因：
      • JavaScript语法标准繁多，浏览器支持程度不一
      • 开发者需要用到高级语法
    • Babel官方站点
  • 语法安全降级
    • 上层解决方案：@vitejs/plugin-legacy
    • 底层原理
      • 借助Babel进行语法自动降级
      • 提前Polyfill注入实现，如core-js、regenerator-runtime
  • 服务端渲染（SSR）
    • 一种常见的渲染模式，用于提升首屏性能和SEO优化
  • 深入了解底层标准
  • Vite社区生态
avatar
文章
阅读
粉丝