黄页推广网站下载,app营销策略模板,wordpress收录怎么样,google关键词分析工具11 月 16 日#xff0c;Vite 5.0 正式发布#xff0c;这是 Vite 道路上的又一个重要里程碑#xff01;Vite 现在使用 Rollup 4#xff0c;这已经代表了构建性能的大幅提升。此外#xff0c;还有一些新的选项可以改善开发服务器性能。
Vite 4 发布于近一年前#xff0c;它…11 月 16 日Vite 5.0 正式发布这是 Vite 道路上的又一个重要里程碑Vite 现在使用 Rollup 4这已经代表了构建性能的大幅提升。此外还有一些新的选项可以改善开发服务器性能。
Vite 4 发布于近一年前它为生态系统奠定了坚实的基础。随着项目继续在共享基础设施上构建每周 npm 下载量从 250 万跃升至 750 万。框架不断创新除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等还看到新的框架加入并使生态系统更加强大。RedwoodJS 和 Remix 转向 Vite 为 React 生态系统的进一步采用铺平了道路。Vitest 的增长速度甚至超过了 Vite。其团队一直在努力很快将发布 Vitest 1.0。Vite 与 Storybook、Nx 和 Playwright 等其他工具一起使用的故事不断改进环境也是如此Vite 在 Deno 和 Bun 中都是可以使用的。
六个月前Vite 4.3 版本发布。该版本显著提高了开发服务器的性能。然而仍有很大的改进空间。在 ViteConf 上尤雨溪公布了 Vite 的长期计划即致力于开发 Rolldown这是一个带有兼容 API 的 Rust 移植版的 Rollup。一旦准备就绪打算在 Vite Core 中使用它来承担 Rollup 和 esbuild 的任务。这将意味着提高构建性能并大大减少开发和构建之间的不一致。 Rolldown 目前处于早期阶段团队正准备在年底前开源代码库。敬请关注
Vite 5 专注于清理 API删除不推荐使用的功能并简化了解决长期问题的几个功能例如切换定义以使用正确的 AST 替换而不是 regex。团队还将继续采取措施来实现未来的 ViteNode.js 18 现在是必需的CJS Node API 已被弃用。
快速开始使用 Vite 5
可以使用 pnpm create vite 用喜欢的框架搭建 Vite 项目或者使用 vite.new 在线打开启动模板来使用 Vite 5。还可以运行 pnpm create vite-extra 来访问其他框架和运行时Solid、Deno、SSR 和库启动器的模板。当在“其他”选项下运行 create vite 时也可以使用 create vite-extra 模板。
注意Vite 入门模板旨在用作使用不同框架测试 Vite 的平台。在构建下一个项目时建议使用每个框架推荐的启动器。一些框架现在也将 create vite 重定向到它们的启动器Vue 的 create-vue 和 Nuxt 3以及 Svelte 的 SvelteKit。
Node.js 支持
Vite 不再支持已 EOL 的 Node.js 14 / 16 / 17 / 19。现在需要 Node.js 18 / 20。
性能
除了 Rollup 4 的构建性能改进之外还有一个新指南可帮助你识别和修复常见性能问题vitejs.dev/guide/perfo…
Vite 5 还引入了 server.warmup这是一项改善启动时间的新功能。它允许定义应在服务器启动后立即进行预转换的模块列表。当使用 --open 或 server.open 时Vite 还会自动预热应用的入口点或提供的 URL 以打开。
主要更新
Vite 现在由 Rollup 4 提供支持
Vite 现在使用 Rollup 4它也带来了重大变化包括
Import assertions 已更名为 import attributes。不再支持 Acorn 插件。对于 Vite 插件this.resolve的skipSelf选项现在默认为true。对于 Vite 插件this.parse目前仅支持allowReturnOutsideFunction选项。
CJS Node API 已被弃用
Vite 的 CJS Node API 已被弃用。当调用require(vite)时现在会记录弃用警告。应该更新文件或框架以导入 Vite 的 ESM 构建而不是 CJS 构建。
在基本的 Vite 项目中请确保
vite.config.js文件内容使用 ESM 语法。最接近的package.json文件包含type: module或者使用.mjs扩展名例如vite.config.mjs。
对于其他项目有一些常见的方法
将 ESM 配置为默认选项根据需要选择 CJS在项目的package.json中添加type: module。所有*.js 文件现在都被解释为 ESM并且需要使用 ESM 语法。可以将带有.cjs扩展名的文件重命名以继续使用 CJS。将 CJS 配置为默认选项根据需要选择 ESM如果项目的package.json没有type: module所有*.js文件都将被解释为 CJS。可以将带有.mjs扩展名的文件重命名以使用 ESM。动态导入 Vite如果需要继续使用 CJS可以使用import(vite)进行动态导入 Vite。这需要代码以异步上下文编写但由于 Vite 的 API 大多是异步的因此应该仍然可以管理。
重新制定 define 和 import.meta.env.* 的替代策略
在 Vite 4 中define和import.meta.env.*功能在开发和构建中使用不同的替换策略
在开发环境中这两个功能被注入为全局变量到globalThis和import.meta中。在构建环境中这两个功能被静态地使用正则表达式替换。
这导致在尝试访问这些变量时出现开发环境和构建环境的不一致性有时甚至会导致构建失败。例如
// vite.config.js
export default defineConfig({define: {__APP_VERSION__: JSON.stringify(1.0.0),},
})const data { __APP_VERSION__ }
// dev: { __APP_VERSION__: 1.0.0 } ✅
// build: { 1.0.0 } ❌const docs I like import.meta.env.MODE
// dev: I like import.meta.env.MODE ✅
// build: I like production ❌Vite 5 通过使用 esbuild 来处理构建中的替换与开发行为保持一致。
这个改变不应该影响大多数设置因为已经有文档说明define的值应该遵循 esbuild 的语法 为了与 esbuild 的行为保持一致表达式必须是一个 JSON 对象null、boolean、number、string、array 或 object或者一个单个的标识符。 然而如果你更喜欢直接保持静态替换值可以使用 rollup/plugin-replace。
worker.plugins 现在是一个函数
在 Vite 4 中worker.plugins接受一个插件数组((Plugin | Plugin[])[])。而在 Vite 5 中它需要配置为一个返回插件数组的函数(() (Plugin | Plugin[])[])。这个改变是为了使并行的工作器构建更加一致和可预测。
允许包含 . 的路径回退到 index.html
在 Vite 4 中在开发环境中访问包含点.的路径时即使将appType设置为spa默认值也不会回退到index.html。而在 Vite 5 中它将会回退到index.html。
注意如果将图像路径指向一个不存在的文件例如img src./file-does-not-exist.png浏览器将不再在控制台中显示 404 错误消息。
统一开发和预览 HTML 服务行为
在 Vite 4 中开发服务器和预览服务器根据目录结构和末尾斜杠来不同地提供 HTML 服务。这会导致在测试构建后的应用时出现不一致性。Vite 5 将重构成以下类似的单一行为假设以下文件结构
├── index.html
├── file.html
└── dir└── index.htmlmanifest 文件会在 .vite 目录中生成
默认情况下Vite 4 中的清单文件build.manifest和build.ssrManifest是在构建的根目录中生成的。
而从 Vite 5 开始默认情况下它们将会生成在.build.outDir目录中的.vite目录中。这个改变有助于避免公共文件与相同的清单文件名在复制到build.outDir时发生冲突。
CLI 快捷方式需要额外的 Enter 键触发
现在CLI 的快捷方式例如r键重启开发服务器需要额外按下Enter键才能触发快捷方式。例如按下r键后再按Enter键来重启开发服务器。
这个改变防止 Vite 吞噬和控制特定于操作系统的快捷方式使得将 Vite 开发服务器与其他进程结合使用时更加兼容。
更新experimentalDecorators和useDefineForClassFields在 TypeScript 中的行为
Vite 5 使用 esbuild 0.19并移除了对 esbuild 0.18 的兼容层这改变了 experimentalDecorators 和 useDefineForClassFields 的处理方式。
**experimentalDecorators**默认情况下是未启用的需要在tsconfig.json中将compilerOptions.experimentalDecorators设置为true才能使用装饰器。**useDefineForClassFields**的默认值取决于 TypeScript 的目标值如果目标不是ESNext或ES2022或更新版本或者没有tsconfig.json文件则useDefineForClassFields将默认为false这可能会导致问题因为默认的esbuild.target值是esnext。它可能会转译为静态初始化块而这在浏览器中可能不被支持。
因此建议在配置 tsconfig.json时将目标设置为ESNext或ES2022或更新版本或者显式将useDefineForClassFields设置为true。
{compilerOptions: {// 如果使用装饰器设置为trueexperimentalDecorators: true,// 如果在浏览器中看到解析错误设置为trueuseDefineForClassFields: true}
}移除--https标志和https: true
-https标志在内部设置了server.https: true和preview.https: true。这个配置原本是用来与 Vite 3 中取消的自动 https 证书生成功能一起使用的。因此这个配置不再有用因为它会启动一个没有证书的 Vite HTTPS 服务器。
如果使用的是vitejs/plugin-basic-ssl或vite-plugin-mkcert它们已经在内部设置了 https 配置所以可以在设置中移除--https、server.https: true和preview.https: true。
移除resolvePackageEntry和resolvePackageData API
resolvePackageEntry和resolvePackageData API 已被移除因为它们暴露了 Vite 的内部结构并阻碍了过去 Vite 4.3 的潜在优化。可以使用第三方包替代这些 API例如
resolvePackageEntry: 使用 import.meta.resolve 或 import-meta-resolve包。resolvePackageData: 同上并向上遍历包目录以获取根package.json。或者使用社区的 vitefu 包。
import { resolve } from import-meta-env
import { findDepPkgJsonPath } from vitefu
import fs from node:fsconst pkg my-lib
const basedir process.cwd()// resolvePackageEntry:
const packageEntry resolve(pkg, basedir)// resolvePackageData:
const packageJsonPath findDepPkgJsonPath(pkg, basedir)
const packageJson JSON.parse(fs.readFileSync(packageJsonPath, utf-8))已移除的过时 API
CSS 文件的默认导出例如 import style from ./foo.css改用?inline查询参数代替import.meta.globEager改用 import.meta.glob(*, { eager: true }) 代替 ssr.formatcjs 和 legacy.buildSsrCjsExternalHeuristicsserver.middlewareModessr 和 server.middlewareModehtml改用 appType server.middlewareMode: true 代替。
最后
欢迎关注所谓前端微信公众号,大家一起交流 点击扫码关注
