本来想写一篇类似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) { } 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
| 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
| import crypto from 'node:crypto'
const hash = 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块。
参考