好的网站建设公司如何设置友情链接
vite和webpack
文章目录
- vite和webpack
- vite介绍
- 什么是vite
- 为什么使用vite
- vite优缺点
- 热更新的实现原理
- webpack介绍
- 什么是webpack
- webpack 优缺点
- Vite 为什么比 Webpack 快
- vite和webpack的区别
- 面试问题
- Vite为什么比webpack快?
vite介绍
什么是vite
Vite 是新型前端构建工具。
为什么使用vite
一句话总结:使用vite构建项目,启动的速度要比使用webpack构建更快。
-
之前浏览器是不支持ES Modules的,为了在让浏览器能够运行我们写的代码(es6语法、.jsx/.vue文件),我们需要使用打包工具,例如webpack,来实现代码的转换和优化的过程;
-
vite 主要对应的场景是开发模式,它只启动一台静态页面的服务器,对文件代码不打包,服务器会根据客户端的请求加载不同的模块处理
vite优缺点
优点
1、快速的开发体验:由于Vite采用了分块打包和ES6模块语法,因此在开发过程中能够实现快速的热更新和实时预览。
2、简单易用:相较于Webpack,Vite的配置文件简单明了,易于使用。
3、集成Vue.js:在使用Vue.js开发项目时,Vite能够提供更好的支持。
缺点
1、生产环境配置:Vite目前只提供了基本的生产环境打包功能,对于一些复杂的项目,可能需要自行配置。
2、对其他框架支持不够完善:虽然Vite对Vue.js支持非常好,但对其他框架的支持不够完善。
3、虽说加载速度快 ( vite首屏加载等部分还是加载较慢 ) 如果遇到比较复杂的依赖或者其他的话 可能还是比较慢
聊到vite,很多人都知道他的冷启动和热更新非常快,下文说一下vite热更新原理
热更新的实现原理
- 创建一个websocket服务端。vite执行createWebSocketServer函数,调用ws库创建ws服务端。
- 创建一个ws客户端来接收ws服务端的信息。vite首先会创建一个ws client文件,然后在处理入口文件index.html时,把对ws client文件的引入注入到index.html文件中。当浏览器访问index.html时,就会加载ws client文件并执行,创建一个客户端ws,从而接收ws服务端的信息。
- 服务端监听文件变化,发送websocket消息,通知客户端。
- 服务端调用handleHMRUpdate函数,该函数会根据此次修改文件的类型,通知客户端是要刷新还是重新加载文件。
webpack介绍
什么是webpack
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)。
webpack 优缺点
webpack 侧重于模块的打包
优点
- 任何资源都可以作为模块处理
- 社区资源丰富,有很多插件和 loader
缺点
- 配置复杂
- 不适合 node 服务端应用
- 构建速度较慢,需要做很多性能优化
Vite 为什么比 Webpack 快
Webpack
- Webpack 叫做 bundler ,将所有文件打包成一个文件。
- Webpack 先识别入口文件,启动服务器后,最后直接给出打包结果。Webpack 做的是分析代码,转换代码,最后形成打包后的代码。
Vite
- Vite 又叫做 no bundler ,顾名思义,就是不用打包,支持 ES moudle 加载。
- Vite 启动服务器后,会按需加载,当请求哪个模块时才会对该模块进行编译。按需加载的方式,极大的缩减了编译时间。
vite和webpack的区别
-
构建速度
Vite的构建速度比Webpack快得多。Vite使用现代浏览器原生支持的 ES 模块标准,避免了打包和编译的大量时间,而Webpack则需要在打包时对所有模块进行解析和编译。
-
开发模式
Vite支持快速的“即时重载”(Instant Reload)功能,当你编辑代码后,浏览器会自动更新页面,更新速度非常快。Webpack则需要手动刷新浏览器。
-
配置
Webpack需要通过复杂的配置来管理各种不同的loader、插件、代码分割和优化设置等等。相比之下,Vite的默认配置非常简单,只需要少量配置即可满足大部分需求。
-
生态系统和插件支持
由于Webpack已经成为主流的前端构建工具,因此有大量的生态系统和社区支持,包括各种loader、插件、优化工具等等。相比之下,Vite是较新的工具,社区和插件支持还比较有限。
-
热更新机制不同
Webpack的热更新需要整个模块链重新打包和替换,对于大型项目可能会有延迟;Vite的热更新则只会针对改动的模块进行更新,提高了更新速度
面试问题
Vite为什么比webpack快?
Vite 相比于 Webpack 之所以构建快是因为,Vite 借助新版本浏览器可以读懂模块化语法的特点,将项目中的模块化引入统一以一个又一个http请求的方式响应给浏览器,这样做的好处就是省去了 Webpack 构建过程中递归做依赖收集的耗时步骤,又因为Vite是开发环境的工具,绝大多数情况下我们不用不考虑兼容性,故而相对较快