这是我参与【第五届青训营】笔记创作的第十二天。
主要关于构建工具的意义、Vite 概览介绍、Vite 上手实战、Vite 整体架构以及Vite 进阶路线。
构建工具的意义
模块化方案、语法转译、产物质量、开发效率。
Vite 概览介绍
定位:新一代前端构建工具。
两大部分组成:No-bundle开发服务,不需要源文件打包;生产环境基于Rollup的Bundler。
核心特征:高性能、简单易用。
Vite 上手实战
项目初始化
使用Sass/Scss & CSS modules
使用静态资源
使用HMR
生产环境Tree Shaking
响应迅速、开箱即用
Vite 整体架构
依赖预打包
单文件编译
代码压缩
插件机制