李奎-Vite下一代Web开发工具GOTC深圳会场83页.pdf

Vite

下一代web开发工具

个人介绍

•李奎-前端工程师

•Github@underfin

Vite是什么？

•源文件以ESM(ECMAScriptModules)加载，无需打包的开发服务器

•基于Rollup的生产构建

为什么需要Vite?

快，更流畅的开发体验

•随着项目变大，项目的模块越来越多

•打包工具的启动时间变长，HMR时间变长，显著降低了开发效率以及体验

零配置开发Web应用

有多快？

•15万行的React项目从Webpack迁移

用户反馈

•链接

BundlerDevServer是如何工作的？

•扫描项目入口，分析模块依赖

•将整个项目打包之后，启动静态服务等待访问

Bundle-BasedDevServer性能瓶颈

项目启动

•需要等待所有模块分析构建完成，包括分片的模块

HMR(模块热更新)

•模块更新会触发重新打包

ESM(ECMAScriptModules)

•ES6引入的模块化能力，现已经被主流浏览器支持

•当import模块时，浏览器就会加载被导入的模块

ViteDevServer如何改进？

项目启动

•直接启动Server，利用浏览器ESM特性加载模块，并且按需编译

HMR(模块热更新)

•模块更新不会触发重新打包

ViteDevServer模块兼容问题

TS/JSX/CSS等非ESM模块兼容

•将非ESM模块转换成ESM

BroswerESM不能加载Node模块

•重写Node模块的引入路径

ViteDevServer性能问题

模块转换性能问题

•性能高效的工具，如esbuild

•浏览器缓存+模块转换缓存

Node模块文件较多，影响页面加载性能

•项目启动前对Node模块打包成单个文件(依赖预优化)

Vite依赖预优化

工具

•esbuild

识别依赖

•用户配置

•依赖扫描

ViteESMHMR(模块热更新)

•HMRAPI借鉴于WebpackHMRAPI

•通过分析依赖，构建模块依赖图

•当模块发生变更时，查找需要更新的边界，然后通知更新

为什么需要生产构建？

•更好的加载性能

•代码体积优化（Tree-shaking（摇树优化）/minify）

•模块合并分割

为什么选用Rollup进行生产构建？

•基于ESM(Tree-shaking)

•成熟的社区生态

•灵活的插件API设计

•体积更小、运行速度更快的构建产物

Rollup劣势

•Web框架支持度较低

•配置Web应用较为复杂

内置插件

•TS/JSX

•PostCSS/CSSModules/CSSPre-processors

•Assets/JSON

•WebWorker

•ModuleResolver/ModuleAlias/ModuleGlobImport

框架支持

•Vue3(@vitejs/plugin-vue)

•React(@vitejs/plugin-react-refresh)

•Svelte/Preact…

插件API

•继承了Rollup插件API

•兼容社区已有的Rollup插件

•进行了一些拓展（SSR、HMR支持等）

插件兼容开发服务器

•受WMR启发

•对文件请求使用PluginContainer模拟打包时插件行为

SSR（服务端渲染）

•无需打包的开发服务器

•Node加载ESM，支持HMR（模块热更新）+插件

Node如何加载ESM(ECMAScriptModules)?

•转换ESM，提供API加载依赖

•对于Comm