Vite 的基本原理,和 webpack 在开发阶段的比较

这篇具有很好参考价值的文章主要介绍了Vite 的基本原理,和 webpack 在开发阶段的比较。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

主要对比开发阶段。

1,webpack 的流程

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

开发阶段大致流程:指定一个入口文件,对相关的模块(js css img 等)先进行打包,接着启动一个开发服务器,浏览器请求时返回打包后的文件。

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

这样做的特点是:

  1. 如果项目比较大,依赖项比较多,打包速度会降低,会影响到启动速度
  2. 热更新时,被修改模块所依赖的其他模块都会重新打包。

以 vue-cli 创建的项目为例:

初次打包时间 3866ms

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

二次打包 1733ms

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

2,Vite 的流程

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

并不会先打包文件,而是直接启动开发服务器(使用的 koa),所以无论项目多大,启动速度都不太会受到影响

以 Vite 创建的项目为例,虽然现在看和 webpack 的差距没有很大,但项目越大越明显!

初次打包

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

二次打包

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

Vite 拿到所有的资源的步骤如下:

  1. 当访问服务器地址时,会请求 index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

注意到 script 使用了 type="module",所以浏览器会自动请求对应的模块 main.js,由开发服务器返回。

// main.js 源代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
  1. main.js 中引入的模块,浏览器又会自动请求vuestyle.cssApp.vue,以此类推。

注意,在开发阶段,虽然 Vite 比 webpack 发送的请求还多,但这是在本地发送的请求,速度极快,至少比 webpack 打包的速度快。

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

简单编译

值得注意的是,开发服务器会对请求的内容做一些简单的编译后返回,比如:

  1. js 文件,会对路径做变化。这样做的目的是,方便开发服务器寻找对应的内容。

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

2,css 文件,会将 css 编译为字符串,并将 css 文件处理为 ESModule 的形式。

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

3,vue 组件,也编译为纯 js,并且还是 ESModule 。

同时该组件中,还会再次请求带后缀的同名 vue 文件,这是 vue 编译 css 的结果。

Vite 的基本原理,和 webpack 在开发阶段的比较,vite,webpack,前端,vite

3,总结

  1. webpack 会先打包,再启动开发服务器,浏览器请求服务器时直接返回打包结果。
    vite 是直接启动开发服务器,浏览器请求哪个模块,再对该模块进行实时编译。

  2. 由于现代浏览器本身就支持 ES Module,会自动向依赖的 Module 发出请求。而vite充分利用这一点,将开发环境下的模块文件,作为浏览器要执行的文件(所以 vite 项目中不可以使用 CommonJS),而不是像 webpack 那样进行打包合并。

  3. 由于 vite 在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。
    当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite的优势越明显。

  4. 在HMR方面,vite 在改动了一个模块后,仅需让浏览器重新请求该模块即可,不像 webpack 那样需要把该模块的相关依赖模块全部编译一次,效率更高。

  5. 当需要打包到生产环境时,vite 使用传统的 rollup 打包,因此 vite 的主要优势在开发阶段。


以上。文章来源地址https://www.toymoban.com/news/detail-742131.html

到了这里,关于Vite 的基本原理,和 webpack 在开发阶段的比较的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 聊一聊 webpack 和 vite 的开发服务代理的问题

    webPack And Vite 都是两个比较好用的打包工具,尤其是 Vite , 几几年流行忘记了,特色就是服务启动极快,实现预加载,感觉 webPack 要比 Vite 要复杂一点,不过两者都是比较好的打包工具 今天想聊一聊关于 webPack 和 Vite 的开发代理模块的使用 以下功能,是在 webpack.config.js 中配置

    2024年01月25日
    浏览(45)
  • Vite 基本配置及原理

    如果你还不知道 Vite,或者不知道为什么有了 Webpack 还要出现 Vite,可以先移步看 从零入门 Vite 与 Webpack 对比 。 前文说过,Vite 使用 Koa 或者 express 这种后端服务框架搭建了一个开发服务器,当我们执行 npm run dev 命令去启动这个开发服务器时,会提示我们访问 http://127.0.0.1:

    2023年04月08日
    浏览(72)
  • 【前端工程化】深入浅出vite(一)--vite的优点及原理、性能优化

    Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 webpack 支持多种模块化,将不同模块的依赖关系构建成依赖图来进行统一处理,当构建的项目越来越大时,需要处理的 JS 代码也越

    2024年02月11日
    浏览(50)
  • 【前端面试3+1】12 toktn验证过程、面向对象特性、webpack和vite的区别、【字符串中的第一个唯一字符】

    用户登录:用户提供用户名和密码进行登录。 服务器验证:服务器接收到用户提供的用户名和密码,进行验证。 生成token:如果用户名和密码验证通过,服务器会生成一个token,通常包含一些加密的信息,如用户ID、过期时间等。 返回token:服务器将生成的token返回给客户端(

    2024年04月18日
    浏览(77)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • vite前端工具链,为开发提供极速响应

    Vite是一个高性能的分布式智能合约平台。它使用了一种名为“异步架构”的设计,能够支持高吞吐量和低延迟的交易处理。Vite采用了基于DAG(有向无环图)的账本结构,可以实现并行处理多个交易,并且具有快速确认的能力。Vite还支持智能合约的开发和执行,并提供了一种

    2024年01月19日
    浏览(35)
  • webpack与vite区别

    webpack和Vite作为两种常用的前端构建工具,主要有以下几点区别: 构建速度 webpack采用“打包”的方式构建,需要将所有模块打包成几个大的bundle文件,构建速度较慢。 Vite采用了“按需编译”的方式,只在浏览器请求时才编译对应模块,启动速度更快。 dev server webpack dev server在启动时

    2024年02月13日
    浏览(40)
  • vite 和 webpack 的区别

    1. 构建原理: Webpack 是一个静态模块打包器,通过对项目中的JavaScript、css、Image 等文件进行分析,生成对应的静态资源,并且通过一些插件和加载器来实现各种功能。 Vite 是一种基于浏览器元素 ES 模块解析构建工具,它通过在服务器端搭建开发环境,在浏览器中使用原生E

    2024年02月07日
    浏览(34)
  • vite和webpack的区别

    Vite 和 Webpack 是两个常用的前端构建工具,它们有以下几个主要区别: 1. 构建速度: Vite 在开发环境下具有快速的冷启动和热重载能力,基于 ES 模块导入原理,无需打包就可以实时编译。这使得在开发过程中的修改能够立即反映在浏览器中,极大地提高了开发效率。Webapck

    2024年02月07日
    浏览(39)
  • Webpack 和 Vite 的区别

    Webpack 和 Vite 都是前端构建工具,但它们在设计哲学和执行方式上有所不同。以下是两者之间的主要区别: 基本原理 : Webpack : 它是一个模块打包工具,它的主要目标是打包 JavaScript 模块。为了处理 ES modules 或其他新的语法,Webpack 依赖于 loaders。同时,它还可以使用插件处理

    2024年02月10日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包