vite ｜ 青训营笔记

再盼春
53 阅读1分钟

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

为什么需要构建工具？

image.png

什么是Vite?

image.png 当下的问题

  • bundle(打包)带来的性能开销

  • JS本身的性能瓶颈，性能优化手段少

问题之下的两种趋势

  1. 浏览器原生ESM支持

image.png

  1. 基于原生ESM的开法服务优势
  • 无需打包代码
  • 天然的按需加载
  • 利用文件级别的浏览器缓存
  1. 基于原生语言编写的工具 深度利用Esbuild（基于Golang开发的前端工具)
  • 打包器Bunder
  • 编译器Transtormer
  • 压缩器Minifer

image.png

如何使用Vite

  • 项目初始化

image.png

  • 安装常用的工具sass与scss并使用

image.png

image.png

  • 静态资源

image.png

  • HMR（热更新）

热更新的英文全称为Hot Module Replacement，简写为 HMR。当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作

  • 生产环境Tree Shaking

image.png

整体架构

image.png

  • 开发环境下的依赖预拉包

image.png

  • 单文件编译 编译速度虽然提升，同时暴露了地 Esbuild局限性：
  1. 不支持类型检查
  2. 不支持语法降级ES5

  • 代码压缩

  • 插件机制

vite进阶路线

学习方法和思路（由浅入深）

  1. 底层依赖的引擎

image.png

  1. 插件开发相关

为什么需要：

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

插件开发钩子

image.png

  1. 代码分割（拆包）

image.png

  1. JS编译工具

image.png

  1. 语法安全降级

babeljs.io/docs/en/bab… github.com/vitejs/vite…

  1. 服务端渲染

image.png

  1. 深入了解底层标准

antfu.me/posts/publi…

avatar
文章
阅读
粉丝