vite6新特性一览

本来想写一篇类似vite4.3是如何更快的,发现vite6并没有做出太多性能上的优化及新特性的探索,算是一个vite7的过渡版本,所以本文简单过一下新特性和一些优化的点吧。

新特性

环境 API

这应该是此次版本更新中最主要的特性,但主要影响范围是在插件上,大部分用户不需要做改动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Plugin } from 'vite'

export function myPlugin(): Plugin {
return {
name: 'my-plugin',
resolveId(id, importer, options) {

const isSSR = this.environment.name !== 'client'

if (isSSR) {
// SSR 特有逻辑
} else {
// 客户端特有逻辑
}
},
}
}

Sass 默认使用现代 API

在 Vite 5 中,Sass 默认使用传统 API。Vite 5.4 增加了对现代 API 的支持。

从 Vite 6 开始,Sass 默认使用现代 API。如果想继续使用传统 API,可以设置 css.preprocessorOptions.sass.api: 'legacy' / css.preprocessorOptions.scss.api: 'legacy'

此变更可能会影响所有使用sass和postcss的项目。

建议同时将sass更新到最新版本。

升级现代api的好处:更好的性能和编译速度,多次依赖相同的样式表不再会导致重复的CSS。

性能优化

crypto.hash

crypto.hash似乎比crypto.createHash更快,它也使代码更简单(当我们可以删除polyfill部分时)。

1
2
3
4
5
6
7
8
9
// old
import { createHash } from 'node:crypto'

export const cspHashes = [
safari10NoModuleFix,
systemJSInlineCode,
detectModernBrowserCode,
dynamicFallbackInlineCode,
].map((i) => createHash('sha256').update(i).digest('base64'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// new
import crypto from 'node:crypto'

const hash =
// eslint-disable-next-line n/no-unsupported-features/node-builtins -- crypto.hash is supported in Node 21.7.0+, 20.12.0+
crypto.hash ??
((
algorithm: string,
data: crypto.BinaryLike,
outputEncoding: crypto.BinaryToTextEncoding,
) => crypto.createHash(algorithm).update(data).digest(outputEncoding))

export const cspHashes = [
safari10NoModuleFix,
systemJSInlineCode,
detectModernBrowserCode,
dynamicFallbackInlineCode,
].map((i) => hash('sha256', i, 'base64'))

更新eslint规则

1
2
3
4
5
6
7
8
{
name: 'disables/vite/cjs',
files: ['packages/vite/index.cjs'],
rules: {
'no-restricted-globals': 'off',
'n/no-missing-require': 'off',
},
},

如果代码拆分css,跳过style.css提取

如果对 CSS 进行代码拆分,有一部分代码仍在提取合并的 CSS 块,以生成非代码拆分的 style.css 块,而这个块总是空的。

因此更新为只有在cssCodeSplit被禁用时才会提取合并的CSS块。

参考