这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
Vite知识体系
本节课设计的主要内容会有以下部分
- 前端工程的痛点
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
构建工具
- 模块化：把项目拆分为不同的模块，分别进行开发和维护，分而治之。在Python中，都会有一些语言标准的模块化规范，但是在JS中并没有统一的。目前主要的规划是：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能（线上代码的压缩，对于未使用的模块需要进行剔除，优化产物体积，以及一些兼容性的问题）
- 开发效率：热更新（可以看到最新的页面效果）
解决的方案
- 模块化--构建工具提供统一的模块加载方案，兼容不同的模块规范
- 语法转移--构建工具会集成一系列的工具链，高级语法转移：Sass、TypeScript; 资源加载，如图片，字体，worker
Vite概要介绍
定位：新一代的前端构建工具 两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup 的Bundler 核心特征
- 高性能：dev启动速度和热更新速度非常快
- 简单易用：开发者体验好
两大行业趋势：
- 全球浏览器对原生的ESM的普通支持（目前占比92%以上）
- 基于原生语言（Go Rust) 编写前端编译工具链
- 如Go语言编写的Esbuild Rust编写的SWC
浏览器原生ESM支持：
- script标签增加 type="module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化 Esbuild ——基于Golang开发的前端工具，具备以下的能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minifier 性能很高，在Vite中被深度使用
