前端

这篇笔记记录了Vite的概要、实战、进阶等知识体系

一、本堂课重点内容

  • 浅谈构建工具
  • Vite概要介绍
  • Vite上手实战
  • Vite整体架构
  • Vite进阶路线

二、详细知识点介绍

1、构建工具存在的意义

  • 前端工程的痛点
    • 模块化：ESM、CommonJS、UMD
    • 资源编译：高级语法的编译
    • 产物质量：代码体积、代码性能
    • 开发效率：热更新
  • 前端构建工具的意义
    • 模块化方案
      • 提供模块加载方案
      • 兼容不同模块规范
    • 语法转译
      • 高级语法转译
      • 资源加载
    • 产物质量
      • 产物压缩
      • 无用代码删除
      • 语法降级
    • 开发效率
      • 热更新

2、Vite的概要介绍

  • 定位：新一代前端构建工具
  • 两大组成部分
    • No-bundle 开发服务，源文件无需打包
    • 生产环境基于Rollup的Bundler
  • 核心特征
    • 高性能，dev启动速度和热更新快
    • 简单易用，开发者体验好
  • 两大行业趋势
    • 浏览器对原生ESM的普遍支持
      • script标签增加type="module"属性
      • 使用ESM模块导入导出语法
    • Esbuild的使用
  • 基于原生ESM的开发服务优势
    • 无需打包项目源代码
    • 天然的按需加载
    • 可以利用文件级的浏览器缓存
  • 基于Esbuild的编译性能优化
    • Esbuild是一个基于Golang开发的前端工具，具备以下功能
      • 打包器 Bundler
      • 编译器 Transformer
      • 压缩器 Minifier
  • 内置的Web构建能力

3、Vite实战

  • 项目初始化
npm i -g pnpm
pnpm create vite
pnpm install
npm run dev
  • 引入资源
  • 使用HMR：无需额外配置，自动开启
  • 生产环境Tree Shaking

4、Vite整体架构

  • 关键技术
    • 依赖预打包
      • 避免node_modules过多的文件请求
      • 将CommonJS格式转换为ESM格式
    • 单文件编译
    • 代码压缩
    • 插件机制

5、Vite进阶

  • 了解Esbuild、Rollup基本使用，尝试各种配置，学习插件开发
  • 插件机制
    • 抽离核心逻辑
    • 易于拓展
  • 了解Vite社区生态

三、实践练习例子

  • 无

四、课后个人总结

  • 作为下一代的前端工具链，Vite具有良好的发展前景，因此有必要掌握Vite最基础的使用

五、引用参考