浅谈构建工具

为什么需要构建工具

前端工程的痛点

核心要素 - 资源 JS、TS、JSX、CSS、SCSS、LESS、PNG、JPEG...

模块化

ESM、CommonJS、UMD

资源编译

高级语法的编译

产物质量

代码体积、代码性能

开发效率

热更新

前端构建工具的意义

模块化方案	提供模块加载方案;兼容不同模块规范
语法转译	高级语法转译，如Sass、TypeScript;资源加载，如图片、字体、worker
产物质量	产物压缩、无用代码删除、语法降级
开发效率	热更新

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上手实战

提前安装pnpm

npm i -g pnpm

初始化命令

pnpm create vite

安装依赖

pnpm install

启动项目

npm run dev

生产环境 Tree Shaking

优化原理：

基于ESM的import/export语句依赖关系，与运行时状态无关
在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启

Vite整体架构

关键技术：单文件编译

用Esbuild编译TS/JS

优势

编译速度提升10-100x

局限性

不支持类型检查
不支持语法降级到ES5

关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

关键技术：插件机制

开发阶段->模拟Rollup插件机制
生产环境->直接使用Rollup

Vite进阶路线

深入双引擎

esbuild
rollup.js

Vite插件开发

为什么需要插件机制

抽离核心逻辑
易于拓展

各阶段

服务启动阶段
请求响应阶段
热更新阶段
服务关闭阶段

JS编译工具（Babel）

出现的原因：

JavaScript语法标准繁多，浏览器支持程度不一
开发者需要用到高级语法

语法安全阶级

如何在构建产物中避免这类问题

上层解决方案：@vitejs/plugin-legacy
底层原理：
- 借助Babel进行语法自动降级
- 提前注入Polyfill实现，如core-js、regenerator-runtime

响应式系统与 React｜ 青训营