Vite 4.0 迭代更新的亮点

221 阅读2分钟

1.主要目标

升级至Rollup3

2.升级至Rollup3的优点

简化 Vite 的内部资源处理并有许多改进

    1. Vite core monorepo 框架插件

(1)@vitejs/plugin-vue 和 @vitejs/plugin-react 从 Vite 的第一个版本开始就是 Vite core monorepo 的一部分。这有助于在进行更改时获得紧密的反馈循环,因为同时测试和发布了 Core 和插件。

(2)借助 vite-ecosystem-ci,可以通过在独立仓库上开发的这些插件获得此反馈。Vite 4 开始,从 Vite core monorepo 中移出。 `

    1. 在开发过程中使用 SWC 的新 React 插件

(1)SWC 现在是Babel的成熟替代品,尤其是在 React 项目中。SWC 的 React 快速重新刷新比 Babel 快很多,所以说SWC 现在是一个更好的选择。

(2)从 Vite 4 开始,有两个插件可用于不同的 React 项目。

    1. @vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件,以较小的包占用空间和能够使用 babel transform pipeline 的灵活性实现快速 HMR。 `
    1. @vitejs/plugin-react-swc 是一个新的插件,在构建过程中使用 esbuild,但在开发过程中将 Babel 替换为 SWC。对于不需要非标准 React 扩展的大型项目,冷启动和热更新 (HMR) 会加快。

3. 兼容性

(1) 现代浏览器构建现在默认以 Safari 14 为目标,以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt,并且不再转译空值合并运算符。如果需要支持旧的浏览器,可以像往常一样添加@vitejs/plugin-legacy

4. 将 CSS 作为字符串导入

(1)在 Vite 3 中,.css 文件的默认导出可能会引入 CSS 的双重加载。

import CommonCss from '../common.css'

以上这种引入方式,双重加载可能会发生,因为会发出.css文件,并且很可能 css 字符串也会被应用代码使用。从 Vite 4 开始,.css默认导出被弃用。在这种情况下,需要使用 ?inline 查询后缀修饰符,因为它不会发出导入的.css样式。

import stuff from '../common.css?inline'

5. 其它功能

  • 预打包依赖项时支持 patch-package;
  • 更简洁的构建日志输出并切换到 kB 以与浏览器开发工具保持一致;
  • 改进 SSR 期间的错误消息。

6.Vite 4.0更多详细信息,请跳转至一下链接查阅

github.com/vitejs/vite…