03｜从Rollup到Vite：如何用Vite构建你的Vue 3项目？

Vite vs Rollup: Vue.js 3项目构建工具选择 Vite是Vue.js 3的官方开发工具，旨在提高JavaScript项目的开发效率。相比于Webpack，Vite支持开箱即用，无需繁杂配置，且利用最新的浏览器特性，能在开发模式下快速编译代码，极大提升开发效率。Vite采用esbuild进行代码编译，其打包速度比普通JavaScript实现的构建器快10~100倍。然而在生产模式中，Vite选择了Rollup，因为esbuild在代码分割和CSS处理方面不如Rollup稳定成熟。 文章介绍了如何用Vite和Rollup来搭建Vue.js 3项目，并对比了两者的差异。Vite的配置相对简单，只需几个简单的依赖和配置文件即可进入开发和生产模式，而Rollup则需要更多的配置和插件选择。在开发模式下，Vite通过esbuild和浏览器ESM对项目页面的JavaScript进行按需加载，相比之下，Rollup直接将所有依赖代码打包编译成Bundle文件格式。这导致Vite在开发模式下能快速编译，理论上比Rollup更快。然而，Vite的开发模式也可能面临浏览器请求时间过长的问题，影响开发体验。 尽管Vite在生产模式下通过Rollup进行打包编译，但开发和产线两种不同编译代码结果可能会带来一些风险。因此，使用Vite开发企业级项目需要多验证和测试功能，以降低项目风险。总的来说，Vite在开发效率和配置简易性方面具有优势，但在企业级项目中需要谨慎使用，特别是在处理开发和生产模式下的差异时。 通过本文，读者可以快速了解Vite和Rollup在Vue.js 3项目构建中的差异，以及在选择合适的构建工具时需要考虑的因素。