首页
学习
活动
专区
圈层
工具
发布
技术百科首页 >Vite >Vite 的构建产物是如何优化的?

Vite 的构建产物是如何优化的?

词条归属:Vite

Vite 的生产构建聚焦于产物体积与加载效率的优化,由 Rolldown 与相关工具链共同完成。

1. Tree-shaking 移除死代码

构建时会基于 ESM 的静态结构分析未使用的导出,将其从产物中移除(dead code elimination),减小最终包体积。

2. 代码压缩与资源内联

通过压缩器(Vite 8 默认采用 Lightning CSS 处理 CSS、Oxc 处理 JavaScript)对产物做压缩混淆,并对小体积静态资源做内联处理,减少额外请求。

3. 分块与缓存策略

结合代码分割把不常变动的依赖拆为稳定 chunk,配合文件内容哈希命名,让浏览器能够长期缓存未变更的资源,提升二次访问速度。

相关文章
Vite 是如何使用 Rollup 进行构建的
我们都知道,Vite 在生产环境中,会使用 Rollup 进行构建,那么 Vite 是如何做到的呢?本文将讲述,从执行 vite build 到输出构建产物,这期间到底发生了什么?
CandyTong
2022-12-27
3K1
Vite 是如何使用 Rollup 进行构建的
我们都知道,Vite 在生产环境中,会使用 Rollup 进行构建,那么 Vite 是如何做到的呢?本文将讲述,从执行 vite build 到输出构建产物,这期间到底发生了什么?
CandyTong
2023-02-24
2.2K0
Vite 是如何兼容 Rollup 插件生态的
我们知道,Vite 开发时,用的是 esbuild 进行构建,而在生产环境,则是使用 Rollup 进行打包。
CandyTong
2022-07-18
1.5K0
Vite Server 是如何处理页面资源的?
我们知道,Vite 在开发环境下,会打开一个 Dev Server 用于预览开发的页面,那么这个 Dev Server 到底做了什么呢?它是怎么做到将我们的代码展示成页面的,接下来我们就来一探究竟。
CandyTong
2022-07-18
1.3K0
ViteConf 2023结束,现在的Vite发展如何?是时候使用Vite了么?
ViteConf2023,主要讲解了Vite的发展、一些开发大牛分享Vite的使用,以及一些框架对Vite的适配,看着确实让人激情澎湃,那么?已经2023年了,Vite现在发展怎么样呢?现在是时候切换到Vite么?
Mintimate
2023-10-10
2.3K0
点击加载更多
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
领券