Vite知识体系 | 青训营笔记

1010A
209 阅读1分钟

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

浅谈构建工具

构建工具意义

image.png

Vite概要介绍

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

两大组成部分：

  • No-bundle开发服务，源文件无需打包
  • 生产环境基于Rollup的Bundler

核心特征：

  • 高性能，dev启动速度和热更新速度非常快
  • 简单易用，开发者体验好 浏览器原生ESM支持

image.png

Vite上手实战

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

基于Esbuild的编译性能优化

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

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

性能极高，在Vite中被深度使用

项目初始化 image.png

使用Sass/Scss& css Module image.png

image.png

使用静态资源 image.png

使用HMR、Tree Shaking：无需额外配置，自动开启

其中Tree Shaking的优化原理是

  1. 基于ESM的import/export语句依赖关系，与运行时状态无关
  2. 在构建阶段将未使用到的代码进行删除

Vite最直观的印象：响应迅速，开箱即用

Vite整体架构

image.png

关键技术一：依赖预打包

image.png

关键技术二：单文件编译

image.png

关键技术三：代码压缩

image.png

关键技术四：插件机制

image.png

Vite进阶路线

推荐学习路线顺序：

  • 先了解基本使用，动手尝试各项常用配置
  • 然后学习插件开发

插件开发 image.png

image.png

代码分割(拆包)

image.png

JS编译工具

image.png

语法安全降级

image.png

服务端渲染（SSR)

image.png

avatar
文章
阅读
粉丝