这是我参与「第四届青训营 」笔记创作活动的的第13天。
浅谈构建工具
-
核心要素——资源
-
模块化：ESM、CommonJS、UMD
-
资源编译：高级语法的编译
-
产物质量：代码体积、代码性能
-
开发效率：热更新
-
-
前端构建工具的意义
-
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
-
语法转译 高级语法转译，如Sass、TypeScript 资源加载，如图片、字体、worker
-
产物质量
- 产物压缩、无用代码删除、语法降级
-
开发效率：热更新
-
Vite概要介绍
定位：新一代前端构建工具
两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能：dev启动速度和热更新速度非常快 简单易用，开发者体验好
基于原生ESM的开发服务优势
- 无需打包项目源代码 天然的按需加载 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
-
Esbuild——基于Golang开发的前端工具，具备如下能力
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
-
性能极高，在Vite中被深度使用
Vite上手实战
1、项目初始化
-
安装pnpm
npm i -g pnpm -
初始化命令
pnpm create vite -
安装依赖
pnpm install -
启动项目
npm run dev
2、使用Sass/Scss&CSS Modules
-
目录结构
-
安装Sass
pnpm i sass -D -
引入Header组件
3、使用静态资源
-
目录结构
-
以svg图片为例
-
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持
4、生产环境Tree Shaking
优化原理：
- 基于ESM的
import/export语句依赖关系，与运行时状态无关 - 在构建阶段将未使用的代码进行删除
5、Vite最直观的印象
响应迅速 开箱即用
Vite整体架构
1、依赖预打包
-
原因：避免
node_modules过多的文件请求 将Commonjs格式转换为ESM格式 -
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对以来代码进行预打包
- 改写
import语句，指定依赖为预构建产物路径
2、单文件编译
用Esbuild编译TS/JSX
-
优势：编译速度提升10-100x
-
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
3、代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
4、插件机制
-
开发阶段->模拟Rollup插件机制
-
生产环境->直接使用Rollup
Vite进阶路线
-
Vite的插件开发
需要插件机制的原因
- 抽离核心逻辑
- 易于拓展
-
参考资料
-
复杂度较低的插件：json加载插件
-
复杂度中等的插件：Esbuild接入插件
-
复杂度较高的插件：官方React插件
-
JS编译工具（Babel）
- Babel原理
-
语法安全降级
-
服务器渲染（SSR）
一种常见的渲染模式，用于提升首屏性能和SEO优化
-
深入了解底层标准
重点特性：
- CJS规范
- ESM规范
- HTTP2.0特性
