这是我参与[第四届青训营]笔记创作活动的第十二天。
01、浅谈构建工具
1、为什么需要构架工具？
- 模块化
- ESM.CommonJS. UMD
- 资源编译
- 高级语法的编译
- 产物质量
- 代码体积.代码性能
- 开发效率
- 热更新
2、前端构建工具的意义：
02、Vite概要介绍
定位:新一代前端构建工具
两大组成部分:
- No—bundle开发服务．源文件无需打包
- 生产环境基于Rollup 的 Bundler
核心特征
- 高性能,dev启动速度和热更新速度非常快!
- 简单易用．开发者体验好
特点：
- 响应迅速
- 开箱即用
两大行业趋势：
全球浏览器对原生ESM的普遍支持(目前占比92%以上)
- 基于原生语言(Go、Rust)编写前端编译工具链
- 如Go语言编写的Esbuild、 Rust编写的Swc
浏览器对原生EMS支持
两大要素:
- script标签增加 type="module”属性
- 使用ESM模块导入导出语法
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化：
Esbuild ——基于Golang开发的前端工具,具备如下能力:
- 打包器Bundler
- 编译器Transformer 性能极高,在Vite中被深度使用
- 压缩器Minifier
内置的Web构建能力 Vite开箱即用的功能等价于
- webpack
- webpack一dev-server
- css—loader
- style一loader
- less—loader
- sass—loader
- postcss—loader
- file一loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
- ........
集成度非常高 例子：
03、Vite上手实战
项目初始化
#提前安装pnpm
- npm i -g pnpm
#初始化命令
- pnpm create vite
#安装依赖
- pnpm install
#启动项目
- npm run dev
启动完成后，打开浏览器访问对应地址即可
使用Sass/Scss& CSS Modules
使用动态资源
除了常见的图片格式. Vite也内置了对于JSON、Worker.WASM资源的加载支持
cn.vitejs.dev/guide/featu…
生产环境 Tree Shaking
优化原理:
- 基于ESM的import/ export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在 Vite中无需配置，默认开启!
04、Vite整体架构
关键技术：
依赖预打包
为什么要进行预打包?
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX
优势:
- 编译速度提升10—100 x
局限性:
- 不支持类型检查
- 不支持语法降级到ES5
代码压缩
Esbuild作为默认压缩工具,替换传统的Terser 、 uglify . js 等压缩工具
插件机制
开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup
插件兼容性具体可查阅
https://vite—rollup一plugins.patak.dev/
05、Vite进阶路线
深入双引擎
参考资料:
- Esbuild官方文档
- Rollup官方文档
推荐学习顺序:
- 先了解基本使用．动手尝试各项常用配置;
- 然后学习其插件开发。
插件开发
为什么需要插件机制?
- 抽离核心逻辑
- 易于拓展
插件示例
- 开发Vite插件
- 配置文件引入插件
参考资料:
Vite插件开发文档
- 复杂度较低的插件:json加载插件
- 复杂度中等的插件:Esbuild接入插件
- 复杂度较高的插件:官方React插件
先看文档.过一遍插件钩子的功能
然后多学习其它插件的实现．掌握套路
代码分割(拆包)
参考资料:
JS编译工具(Babel)
出现的原因:
- JavaScript语法标准繁多.浏览器支
- 持程度不一
- 开发者需要用到高级语法
语法安全降级
如何在构建产物中避免这类问题?
上层解决方案:@vitejs/ plugin-legacy
底层原理
- 借助Babel进行语法自动降级
- 提前注入 Polyfill 实现．如core-js. regenerator—runtime
服务端渲染
深入了解底层标准
Vite 社区生态
Github 4Ok+ star(可参考webpack 61.3 K , rollup 21.8k).并且目前还在持续维护
官方提供插件:
- @vitejs/plugin一vue.提供Vue 3支持
- @vitejs/plugin-vue一jsx .提供Vue 3 JSX支持
- @vitejs/plugin一react ,提供React支持
- @vitejs/plugin—legacy ,提供低版本浏览器降级支持
海量社区插件： github.com/vitejs/awes…
