一文搞懂webpack和vite的区别

webpack和vite的区别，vite快的原因以及vite的缺点

vite比webpack快的原因：

1.webpack是全部打包完毕之后再启动；vite是冷启动，热替换的（直接启动，然后按需打包加载）

2.vite是基于es6 module，浏览器原生支持，不需要额外的编译或转换；webpack是基于commonjs，浏览器不认识，需要转换。

3.vite在开发环境下，使用esbuild构建(Go 编写)，但是打包到生产环境时，vite使用传统的rollup进行打包；webpack开发阶段使用webpack-dev-server，生产环境会使用很多相关的插件来优化打包——> 所以vite的优势主要在开发阶段（esbuild）

说白了：vite之所以启动快，主要是因为vite启动时并不会像webpack一样对所有代码进行编译/打包/压缩, 他只会对一小部分代码进行一些简单的处理，剩余的工作都交给浏览器，以及运行时进行依赖分析，动态打包，动态引入

vite的缺点：

注意：webpack的作者是TK大神，新出了Turbopack，比Vite快10倍

1.生态环境不及webpack，加载器、插件不够丰富

2.项目太大又没有进行预编译，第一次启动项目会很慢

3.vite的热更新经常不生效，有时需要刷新页面才可以

4.开发环境和生产环境的效果有时候不一致！

为什么vite有时候打开慢？启动完之后，你打开首页，你可能就不一定觉得vite快了，如果依赖的资源比较多，那速度有时慢的感人。

vite启动快的原理，也导致了他在加载依赖项很多，很复杂的页面时，页面打开慢。因为他要进行一系列的动态分析/动态资源引入/动态编译。

vite的慢的时候，会有什么表现呢？

• 从web开发者工具的network选项卡中，会看到请求了很多资源

• 终端(CMD)中也会显示, 类似这样的文字： [vite] new dependencies found: axios, updating... [vite] ? dependencies updated, reloading page...

• 界面会被强制刷新一次

注意：vite第一次启动访问页面的时候可能会比较慢，但是vite第二次启动会有缓存，所以就会快了

解决方案：我们可以使用插件配置预编译

看到这里你可能会想，vite第二次启动本来就有缓存，本来就快，那这个插件岂不是没有意义了？当然还是有意义的，如果在这之后，被人再拿到你的源代码，因为package.json中已经有了预构建配置了，所以，他的vite在第一次启动时，就能对资源进行预构建了，另外，如果你由于某些原因需要删除node_modules/.vite这个缓存目录, 由于有这个插件，你的这次首次启动也会快起来。

webpack简介

Webpack是一个用于前端项目构建的静态模块打包工具，它主要用来处理和打包各种前端资源，包括JavaScript、CSS、图片等，以及优化项目结构和性能。Webpack可以将项目中的多个模块和资源打包成一个或多个静态文件，从而方便部署到生产环境，并且提高网页加载性能。

当webpack处理应用程序的时候，他会在内部从一个或者多个入口点 构建一个依赖图，然后将你的项目中所需的每一个模块组合成一个或多个bundles.js，它们均为静态资源，用于展示你的内容！在html里引入加载bundles就会引入对应的js逻辑了！

它集成了代码编译、压缩、代码混淆、开发调试等工具，还可以通过loaders处理器和plugins插件来全方位提升自己的处理能力。

怎么看待webpack的存在？有什么意义？

模块化开发的支持、资源优化、加载器（Loaders）和插件（Plugins）

提供了开发服务器作为开发支持：支持热模块替换（HMR），能够在代码修改时实时刷新页面，加速开发过程。