这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

构建工具的意义

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

Vite 概览介绍

• 新一代前端构建工具
• 组成部分
  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup 的Bundler
• 核心特征
  • 高性能, dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好
• 前端瓶颈
  • bundle带来的性能开销
  • JavaScript语言的性能瓶颈
• 行业趋势
  • 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
    • 优势
      • 无需打包项目源代码
      • 天然的按需加载
      • 可以利用文件级的浏览器缓存
  • 基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的Swc

Vite 上手实战

• 初始化

  

• 使用Sass/Scss & CSS Modules

  

  

• 使用静态资源

  

• 使用HMR

  

• 生产环境Tree Shaking

  

Vite 整体架构

关键技术

• 单文件编译

• 代码压缩

• 插件机制

  

Vite 进阶路线

• 深入双引擎

  

• 为什么需要插件机制

  • 抽离核心逻辑
  • 易于拓展

• Vite插件开发

  

  • 实例

    

  • 参考资料

    

• 代码分割(拆包)

  

• JS编译工具(Babel)

  

• 语法安全降级

  

• 服务端渲染(SSR)

  

• 深入了解底层标准

  

• Vite社生念