vite知识体系|青训营笔记

67 阅读1分钟

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

前端基础班第13节:vite知识体系。

一.为什么需要构建工具

前端工程的痛点

image.png

前端构建工具的意义

image.png

二.什么是vite

1.新一代前端构建工具

image.png

2.业界案例

image.png

3.当下问题

image.png

4.两大行业趋势

image.png image.png

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

image.png

6.基于Esbuild的编译性能优化

image.png

7.内置web构建能力

image.png

三.如何使用vite

1.项目初始化

提前安装pnpm

image.png

2.使用Scss&CSS Modules

image.png

3.使用静态资源

image.png

4.使用HMR

image.png

5.生产环境的Tree Shaking

image.png

四.vite整体架构

image.png

关键技术:

1.依赖预打包

image.png

2.单文件编译

image.png

3.代码压缩

image.png

4.插件机制

image.png

五.vite进阶路线

1.深入双引擎

image.png

2.vite插件开发

image.png

示例:

image.png image.png

3.代码分割(拆包)

image.png

4.JS编译工具(Babel)

image.png

5.语法安全降级

image.png image.png

6.服务端渲染

image.png

7.深入了解底层标准

image.png

8.vite社区生态

image.png