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

《李奎-Vite下一代 Web 开发工具（GOTC深圳会场）（83页）.pdf》由会员分享，可在线阅读，更多相关《李奎-Vite下一代 Web 开发工具（GOTC深圳会场）（83页）.pdf（27页珍藏版）》请在三个皮匠报告上搜索。

1、Vite下一代 web 开发工具个人介绍 李奎-前端工程师 Github:underfinVite 是什么？源文件以 ESM(ECMAScript Modules)加载，无需打包的开发服务器 基于 Rollup 的生产构建为什么需要 Vite?快，更流畅的开发体验 随着项目变大，项目的模块越来越多 打包工具的启动时间变长，HMR 时间变长，显著降低了开发效率以及体验零配置开发 Web 应用有多快？15 万行的 React 项目从 Webpack 迁移用户反馈 链接Bundler Dev Server 是如何工作的？扫描项目入口，分析模块依赖 将整个项目打包之后，启动静态服务等待访问Bundle

2、-Based Dev Server 性能瓶颈项目启动 需要等待所有模块分析构建完成，包括分片的模块HMR(模块热更新)模块更新会触发重新打包ESM(ECMAScript Modules)ES6 引入的模块化能力，现已经被主流浏览器支持 当 import 模块时，浏览器就会加载被导入的模块Vite Dev Server 如何改进？项目启动 直接启动 Server，利用浏览器 ESM 特性加载模块，并且按需编译HMR(模块热更新)模块更新不会触发重新打包Vite Dev Server 模块兼容问题TS/JSX/CSS 等非 ESM 模块兼容 将非 ESM 模块转换成 ESMBroswer ESM

3、不能加载 Node 模块 重写 Node 模块的引入路径Vite Dev Server 性能问题模块转换性能问题 性能高效的工具，如 esbuild 浏览器缓存+模块转换缓存Node 模块文件较多，影响页面加载性能 项目启动前对 Node 模块打包成单个文件(依赖预优化)Vite 依赖预优化工具 esbuild识别依赖 用户配置 依赖扫描Vite ESM HMR(模块热更新)HMR API 借鉴于 Webpack HMR API 通过分析依赖，构建模块依赖图 当模块发生变更时，查找需要更新的边界，然后通知更新为什么需要生产构建？更好的加载性能 代码体积优化（Tree-shaking（摇树优化）

4、/minify）模块合并分割为什么选用 Rollup 进行生产构建？基于 ESM(Tree-shaking)成熟的社区生态 灵活的插件 API 设计 体积更小、运行速度更快的构建产物Rollup 劣势 Web 框架支持度较低 配置 Web 应用较为复杂内置插件 TS/JSX PostCSS/CSS Modules/CSS Pre-processors Assets/JSON Web Worker Module Resolver/Module Alias/Module Glob Import框架支持 Vue3(vitejs/plugin-vue)React(vitejs/plugin-react

5、-refresh)Svelte/Preact 插件 API 继承了 Rollup 插件 API 兼容社区已有的 Rollup 插件 进行了一些拓展（SSR、HMR 支持等）插件兼容开发服务器 受 WMR 启发 对文件请求使用 Plugin Container 模拟打包时插件行为SSR（服务端渲染）无需打包的开发服务器 Node 加载 ESM，支持 HMR（模块热更新）+插件Node 如何加载 ESM(ECMAScript Modules)?转换 ESM，提供 API 加载依赖 对于 Commn JS 模块直接加载更多的特性 服务端集成 多页支持 提供灵活的 JS API，可集成在其他 Dev ServerVite 的实现离不开众多的开源项目 Rollup esbuild webpack Snowpack WMR 使用 Vite 的项目 vitepress svelte kit slidev reamTHANKS