Skip to content

区别?

在使用vite之前,项目基本都是使用的webpack, 但是针对于witewebpack的区别如下:

开发模式

  1. webpack 在开发过程中,它首先需要完全构建整个项目,生成一个或多个 bundle,然后通过热模块替换(HMR)来更新变化的部分。
  2. vite Vite 使用原生 ES 模块和即时编译,允许在不完整构建的情况下直接加载源代码,提供更快的初始启动时间和按需编译。

启动速度

  1. webpack启动时是需要先编译整个项目,小型项目还好但是对于大型项目,编译时间会比较长;
  2. vite 是预构建和按需编译 但是在启动速度上优于webpack

打包效率

  1. webpack 提供丰富的插件与加载器生态系统,可以处理复杂的构建需求,但是这也是缺点,因为需要更多的配置和依赖。一定程度上导致较长的打包时间
  2. vite 使用esbuild进行打包,esbuild 是一个快速、小巧的 JavaScript 构建工具,可以快速构建项目,并且可以支持 TypeScript、Vue、React 等。但是在对项目的高级优化与定制化方面没有webpack强大

底层实现

  1. webpack 基于Nodejs,打包速度限制与js单线程,对于大项目而言构建速度受其影响
  2. vite esbuild(go 语言开发) 基于Go语言,打包速度限制与Go多线程,对于大项目而言构建速度不受其影响

生态和成熟

  1. webpack 社区生态丰富,许多插件和 loader 已经开源 可用于复杂的场景
  2. vite 不如webpack 社区生态丰富,在特定的构建需求和定制化插件方面不如webpack完善

生产环境

  1. webpack 在生产环境中. 能够提供高度优化的输出, 如代码分割和压缩, 缓存, 模块热更新等.
  2. vite 在某些情况在需要安装额外的配置或者插件才能做到

wangxiaoze | MIT License.