这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
今天主要学习了Vite相关的知识。重点在于前端工程的痛点、前端构建工具的意义、Vite概览 和优势。下面具体介绍一下Vite。
一、为什么需要构建工具
1.前端工程的痛点
核心要素--资源
- JS
- TS
- JSX
- CSS
- SCSS
- LESS
- PNG
- JPEG
- WEBPVite
- ....
模块化
- ESM
- CommonJS
- UMD
资源编译
高级语法的编译
产物质量
代码体积、代码性能
开发效率
热更新
2.前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
产物质量
产物压缩、无用代码删除、语法降级
开发效率
热更新
二、Vite是什么? Why Vite?
Vite概览
定位:新一代前端构建工具
两大组成部分:
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
业界案例
当下问题
当下存在的一些问题：
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈在哪里?
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
两大要素:
- script标签增加type= "module"属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
Esbuild-基于Golang开发的前端工具，具备如下能力:
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
性能极高，在Vite中被深度使用
内置的Web构建能力
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass- loader
- postcss - loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
总结
今天通过对Vite的基本概念和知识的学习，我知道了Vite它在Web方面的用处，知道了它在前端开发与构建的作用，知道了它的优势比如高性能和简单易用，虽然它有很多优点但也存在一些不足比如缓慢的启动和热更新。同时，通过对比我也发现vite相比webpack它按需打包的方式让于打包速度更快。
