Vite 知识体系|青训营笔记

81 阅读1分钟

这是我参与【第五届青训营】笔记创作的第十二天。
主要关于构建工具的意义、Vite 概览介绍、Vite 上手实战、Vite 整体架构以及Vite 进阶路线。

构建工具的意义

模块化方案、语法转译、产物质量、开发效率。

Vite 概览介绍

定位:新一代前端构建工具。
两大部分组成:No-bundle开发服务,不需要源文件打包;生产环境基于Rollup的Bundler。
核心特征:高性能、简单易用。

Vite 上手实战

项目初始化
使用Sass/Scss & CSS modules
使用静态资源
使用HMR
生产环境Tree Shaking
响应迅速、开箱即用

Vite 整体架构

依赖预打包
单文件编译 代码压缩
插件机制

Vite 进阶路线