这是我参与「第四届青训营」笔记创作活动的第7天。
11 Vite
11.1 浅谈构建工具
为什么要构建工具？
前端工程的痛点：模块化(ESM、CommanJS、UMD)、资源编译(高级语法的编译)、产物质量(代码体积、性能)、开发效率(热更新)
构建工具的意义：
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
语法转译
- 高级语法转译，如Sass、TypeScript
- 资源加载，如图片、字体、worker
-
产物质量
- 产物压缩、无用代码删除、语法降级
-
开发效率
- 热更新
11.2 Vite概要介绍
定位：新一代前端构建工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup 的 Bundler
核心特征：
- 高性能，dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
当下问题(Webpack、Rollup)
- 缓慢的启动 -> 项目编译等待成本高
- 缓慢的热更新 -> 修改代码后不能实时更新
瓶颈在哪里？
bundle带来的性能开销
JavaScript语言的性能瓶颈
两大行业趋势
-
全球浏览器对原生ESM的普遍支持(目前占比92%以上)
-
两大要素：
- script标签增加type = "module"属性
- 使用ESM模块导入导出语法
-
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
-
-
基于原生语言(Go、Rust)编写前端编译工具链
-
基于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
......
-
11.3 Vite上手实战
生产环境Tree Shaking
-
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码删除
-
在vite中无需配置，默认开启
11.4 Vite整体架构
依赖预打包
为什么要进行预打包？
- 避免node_modules 过多的文件请求
- 将CommanJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物的路径
单文件编译
用Esbuild编译TS/JSX
优势：编译速度提升10-100x
局限性：不支持类型检查、不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
插件机制
开发阶段 -> 模拟Rollup插件机制
生产环境 -> 直接使用Rollup
插件兼容性具体可查阅 vite-rollup-plugins.patak.dev/
