Vite知识体系 | 青训营

icetm_jim
119 阅读2分钟

👻内容概述

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

1.🙌为什么需要构建工具

前端工程的痛点

在这里插入图片描述 在这里插入图片描述

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

前段构建工具的意义

在这里插入图片描述

2.Vite是什么？Why Vite？

🔑定位：新一代前端构建工具 💡两大组成部分：

  1. No-bundle开发服务，源文件无需打包
  2. 生产环境基于Rollup 的 Bundler 📝核心特征：
  3. 高性能，dev启动速度和热更新速度非常快！
  4. 简单易用，开发者体验好

业界案例

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

在这里插入图片描述

两大行业趋势

在这里插入图片描述

  • 全球浏览器对原生ESM的普遍支持（目前占比92%以上） 在这里插入图片描述
  • 基于原生语言（Go，Rust）编写前端编译工具链
  • 如Go语言编写的Esbuild、Rust编写的SWC

浏览器原生ESM支持

在这里插入图片描述 在这里插入图片描述 两大要素：

  1. script标签增加type=“modle”属性
  2. 使用ESM模块导入导出语法

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

在这里插入图片描述

基于Esbuild的编译性能优化

在这里插入图片描述

内置的Web构建能力

在这里插入图片描述 ###🙌 那么，我们如何使用Vite？

3.Vite上手使用

项目初始化

在这里插入图片描述

使用Sass/Scss&CSSModule

在这里插入图片描述

使用Scss&CSS Modules

在这里插入图片描述

使用静态资源

在这里插入图片描述

生产环境Tree Shaking

在这里插入图片描述

Vite给你最直观的印象如何？

  • 响应迅速
  • 开箱即用

Vite整体架构

在这里插入图片描述

关键技术：依赖预打包

在这里插入图片描述

关键技术：单文件编译

在这里插入图片描述

关键技术：代码压缩

在这里插入图片描述

关键技术：插件机制

在这里插入图片描述

5.Vite进阶路线

深入双引擎

在这里插入图片描述

为什么需要插件机制

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

Vite插件开发

在这里插入图片描述

插件示例

在这里插入图片描述 ###代码分割（拆包） 在这里插入图片描述

JS编译工具（Babel）

在这里插入图片描述

语法安全降级

在这里插入图片描述 在这里插入图片描述

服务端渲染（SSR）

在这里插入图片描述

深入了解底层标准

在这里插入图片描述

Vite社区生态

在这里插入图片描述

avatar
文章
阅读
粉丝