免费获取学习方案
ARTICLE DETAIL

资讯详情

深耕编程基础知识与建站技术分享的一线实战洞察。

Vite 5.0 发布解析:Rollup 4、API 清理与 server.warmup 启动提速指南

Vite 5.0 发布解析:Rollup 4、API 清理与 server.warmup 启动提速指南 Vite 5.0 发布解析Rollup 4、API 清理与 server.warmup 启动提速指南【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite本篇技术指南基于 Vite 团队于 2023 年 11 月 16 日发布的官方公告见 docs/blog/announcing-vite5.md系统梳理 Vite 5.0 的核心变更切换到 Rollup 4、API 清理移除弃用特性、define的 AST 替换重构、Node.js 18 的运行要求以及新引入的server.warmup启动预热能力。读完本文你可以理解 Vite 5 各主要改动的动机与影响面并结合仓库源码定位server.warmup的实现位置为你的项目升级 Vite 5 做好评估与准备。背景Vite 4 奠定的生态基础与长期规划公告首先回顾了 Vite 4 发布近一年来的生态进展这些背景信息决定了 Vite 5 的定位——它不是一次大改而是一次“清理与固化”生态持续扩张npm 周下载量从 250 万增长到 750 万Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等框架持续基于 Vite 构建RedwoodJS 与 Remix 切换到 Vite进一步推动了 React 生态的采用Vitest 的增长速度快于 Vite 本身Vite 与 Storybook、Nx、Playwright 等工具的集成不断完善Vite dev 也支持了在 Deno 与 Bun 环境中运行。ViteConf 2023 与 Rolldown 长期规划在 ViteConf 上Evan You 公布了 Vite 的长期计划——基于 RolldownRollup 的 Rust 移植版本API 兼容重构核心。规划目标是一旦就绪Vite Core 将用 Rolldown 同时承接 Rollup 和 esbuild 的任务带来构建性能提升并大幅减少 dev 与 build 之间的行为不一致。公告发布时 Rolldown 尚处于早期阶段团队计划在年底前开源代码库。值得对照的是从当前仓库源码看这一长期规划后来已落地。packages/vite/package.json 显示当前 Vite 的构建依赖中已包含rolldown且 Vite 自身的构建工具链rolldown --config rolldown.config.ts也已采用 Rolldown印证了公告中“性能敏感部分迁移到 Rust 实现”的方向。快速上手 Vite 5公告给出的上手方式使用pnpm create vite脚手架创建项目可选择你偏好的框架模板使用pnpm create vite-extra获取其他框架与运行时模板Solid、Deno、SSR、library starters在create vite中Others选项下同样可以找到vite-extra模板。公告同时提醒Vite 官方 starter 模板的定位是“用于测试 Vite 与各框架兼容性的 playground”实际生产项目建议使用各框架官方推荐的 starter例如 Vue 的create-vue和Nuxt 3、Svelte 的SvelteKit部分框架的创建命令在create vite中会直接重定向到各自 starter。在当前仓库中脚手架工具对应 packages/create-vite 目录内置了 vanilla、react、vue、svelte、preact、lit、qwik、solid 等框架的 JS 与 TypeScript 双模板如 template-react-ts、template-vue其源码入口见 packages/create-vite/src。Node.js 支持18 / 20 为硬性要求Vite 5 放弃了对 Node.js 14 / 16 / 17 / 19 的支持均已到达 EOLNode.js 18 / 20 成为运行要求。这是对 Vite 长期“面向未来future-proof”策略的又一次推进随着底层工具链如 esbuild、Rollup 4对新版本 Node.js 原生特性的依赖加深维护过旧的运行时支持的代价越来越大。如果你的项目仍运行在 Node.js 16 或更低版本升级 Vite 5 前需要先升级 Node.js。性能提升性能指南与 server.warmupVite 5 在 Rollup 4 带来的构建性能提升之外还带来了面向开发服务器的性能改进核心有两点新增性能排查指南仓库中新增了专门的性能指南 docs/guide/performance.md帮助开发者识别和修复常见的性能问题如依赖优化、模块图过大、转换瀑布等。server.warmup预热常用文件改善启动体验server.warmup是 Vite 5 引入的新特性用于改善服务器启动后的首次加载体验。结合官方配置文档 docs/config/server-options.md 与性能指南 docs/guide/performance.md其完整行为如下类型{ clientFiles?: string[], ssrFiles?: string[] }作用让你声明一组在服务器启动后应立即预转换pre-transform并缓存结果的文件从而改善首次页面加载、避免转换瀑布transform waterfallsclientFiles仅用于客户端的文件ssrFiles仅用于 SSR 的文件两者均接受相对于root的文件路径数组或tinyglobby的 glob 模式官方建议只预热真正高频使用的文件以免在启动时压垮 dev server。配置示例来自官方文档export default defineConfig({ server: { warmup: { clientFiles: [./src/components/*.vue, ./src/utils/big-utils.js], ssrFiles: [./src/server/modules/*.js], }, }, })另一个自动行为当使用--open或server.open启动时Vite 会自动预热应用入口点或指定要打开的 URL从而进一步缩短首次打开的等待时间。源码印证当前仓库中该特性的实现集中在 packages/vite/src/node/server/warmup.ts并通过 packages/vite/src/node/server/index.ts 中的warmupRequest对外暴露环境实例层面同样提供environment.warmupRequest说明预热请求是建立在环境级 transform 管道之上的。Vite 5 主要变更清单公告列出的 Vite 5 主要变更如下每一项都对应 docs/guide/migration.md 迁移指南中的专项章节以下为仓库中该指南的当前路径章节内容会随版本演进升级时请以你目标版本对应的文档为准变更说明要点Vite 改用 Rollup 4 驱动构建性能获得显著提升弃用 CJS Node APINode API 走向纯 ESMCJS 接口被标记弃用重构define与import.meta.env.*替换策略define从正则替换改为基于 AST 的替换修复了此前正则替换带来的一系列历史问题SSR 外部化模块的值与生产一致消除 dev 与 build 之间的行为差异worker.plugins改为函数形式插件数组改为函数接收增强灵活性允许包含.的路径回退到 index.htmlSPA 路由回退行为放宽对齐 dev 与 preview 的 HTML 服务行为减少两种模式下的行为不一致manifest 文件默认生成到.vite目录默认输出位置调整CLI 快捷操作需要额外按一次Enter避免误触更新experimentalDecorators与useDefineForClassFields的 TypeScript 行为TS 编译行为对齐移除--https标志与https: true弃用 HTTPS 快捷选项移除resolvePackageEntry与resolvePackageDataAPI清理已弃用的解析 API移除此前已弃用的 API见迁移指南“Removed deprecated APIs”章节公告特别指出Vite 5 的整体思路是清理 API移除弃用特性并简化多项功能、关闭长期存在的 issue例如define切换到正规的 AST 替换。如何迁移到 Vite 5公告给出的迁移建议升级前先阅读迁移指南docs/guide/migration.md 提供了详细的逐版本迁移说明。公告发布时对应的是 Vite 4 → Vite 5 的指南仓库当前版本已演进至 8.x该文档为最新的迁移指南历史版本的说明请查阅对应版本文档站。完整变更列表见 ChangelogVite 核心的完整变更清单记录在 packages/vite/CHANGELOG.md 中5.0.0 条目2023-11-16即为该发布的低级别拆解。生态协作保障Vite 团队与生态伙伴合作借助vite-ecosystem-ci在做出更大胆变更的同时避免回归——这也是 Vite 敢于在 5.0 中移除弃用 API 的底气所在。致谢与后续发展Vite 5 是 850 多位核心贡献者、下游维护者、插件作者与 Vite 团队共同努力的结果本次重大发布的发布流程由 Bjorn Lu 主导StackBlitz、Nuxt Labs 与 Astro 持续通过雇用 Vite 团队成员的方式投入 Vite 开发。从这份公告出发可以串起 Vite 此后几年的演进主线Vite 5 完成 API 清理并埋下 Rolldown 的种子 → Rolldown 开源并进入技术预览 → 当前仓库中的 Vite 8 已基于 Rolldown 与 Oxc 构建见 packages/vite/package.json 的依赖与 docs/guide/migration.md 中关于 Rolldown 集成、Oxc 转换与压缩的说明。如果你正站在 Vite 5 这一里程碑上升级项目理解公告中“清理 面向未来”的主线就能更从容地应对后续每个大版本的迁移。【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表