这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

Vite知识体系

01为什么需要构建工具

前端工程的痛点

核心要素--资源

JS，TS，JSX，CSS，SCSS，LESS，PNG，JPEG，WEBP...

• 模块化

  ESM，CommonJS，UMD

• 资源编译

  高级语法的编译

• 产物质量

  代码体积，代码性能

• 开发效率

  热更新

前端构建工具的意义

• 模块化方案--

  • 提供模块加载方案
  • 兼容不同模块规范

• 语法转译--

  • 高级语法转译，如Sass，TypeScript
  • 资源加载，如图片，字体，worker

• 产物质量--

  • 产物压缩，无用代码删除，语法降级

• 开发效率--

  • 热更新

02Vite是什么，为什么Vite？

Vite预览

• 定位：新一代前端构建工具

• 两大组成部分：

  0. No-bundle开发服务，源文件无需打包
  1. 生产环境基于Rollup的Bundler

• 核心特征

  0. 高性能，dev启动速度和热更新速度非常快
  1. 简单易用，开发者体验好

当下问题

• 缓慢的启动->项目编译等待成本高
• 缓慢的热更新->修改代码后不能实时更新

瓶颈

• bundle带来的性能开销
• JavaScript语言的性能瓶颈

两大行业趋势

• 全球浏览器对原生ESM的普遍支持（目前占比92%以上）

• 基于原生语言（Go，Rust）编写前端编译工具链

  • 如Go语言编写的Esbuild，Rust编写的SWC

浏览器原生ESM支持

两大要素

• script标签增加type="module"属性
• 使用ESM模块导入导出语法

基于原生ESM的开发服务优势

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

基于Esbuild的编译性能优化

Esbuild--基于Golang开发的前端工具，具备如下能力

0. 打包器Bundler
1. 编译器Transformer
2. 压缩器Minifier

性能极高，在Vite中被深度使用

内置的Web构建能力

Vite开箱即用的功能等价于

• webpack
• webpack-dev-server
• css-loader
• style-loader
• less-loader
• sass-loader
• postcss-loader
• file-loader
• MiniCssExtractPlugin
• HTMLWebpackPlugin
• ...

webpack.config.ts等价于vite.config.ts