这是我参与「第五届青训营」伴学笔记创作活动的第21天
一、本节课重点内容
在正式讲解 Vite 之前，讲师将前置介绍有关前端工程基本知识，同时讲解前端构建工具及解决问题，进而引出作为前端构建工具的 Vite 是什么及其在开发过程中的应用。
课程重点内容归纳总结如下：
- 前端工程的痛点
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
二、详细知识点介绍
- 为什么需要构建工具?
主要是四个方面的问题：
- 模块化（ESM、CommonJS、 UMD）
- 资源编译（高级语法的编译）
- 产物质量（代码体积、代码性能）
- 开发效率（热更新）
前端构建工具的意义：
模块化方案：
- 提供模块加载方案
- 兼容不同模块规范
语法转译：
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量： 产物压缩、无用代码删除、语法降级
开发效率： 热更新
Vite概览：
定位:新一代前端构建工具——↓两大组成部分:
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快!
- 简单易用，开发者体验好
业界案例：
当下问题：
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新 开发体验问题日渐显露! 瓶颈在哪里?
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
单线程的语言，没有多线程语言的有优点，有关于性能优化的地方是缺陷。
- 全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持：
开发服务优势：
Esbuild一基于Golang开发的前端工具，具备如下能力:
- 打包器Bundler
- 编译器Transformer性能极高，在Vite中被深度使用
- 压缩器Minifier
Vite开箱即用的功能等价于
- webpack
- webpack- dev- server
- CSS- loader
- style-loader
- less- loader
- sass -loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
三、总结
vite是更加轻量级的、更加便捷的开发框架，更加兼容的Rollup 的插件机制与 API，实现的极速开发体验、多框架支持、SSR 支持、旧浏览器支持。
