vite与webpack的打包原理:

vite: 基于游览器原生ES Module,利用游览器解析import,服务器端按需编译返回

webpack: 逐级递归识别依赖,构建依赖图谱->转化AST语法树->处理代码->转换为游览器可识别的代码

vite相比webpack的优势:

开发环境中,无需打包操作,可快速冷启动:

由于vite启动的时候不需要打包,也就无需分析模块依赖、编译代码;

从底层原理上来说,vite是基于esbuild预构建依赖,而esbuild是采用go语言编写,go语言的操作是纳秒级别的

webpack是原生js编写的,js是以毫秒计数的,所以vite比webpack启动快很多;

真正的按需编译,不再等待整个应用完成:

webpack:                                                                                                                                vite:

       

当游览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大程度缩短了编译时间,当项目越大,文件越多时,vite的开发优势就越明显

轻量快速的热重载(HMR):

vite在HMR方面,当某个模块内容改变时,让游览器重新请求该模块即可,而不用像webpack那样重新将该模块的所有依赖重新编译

vite相比webpack的劣势:

生态不及webpack、加载器、插件不够丰富

生产环境esbuild构建对于css和代码分割不够友好

项目开发游览要支持ES Module,不能识别CommonJS语法

参考: 

https://blog.csdn.net/huangpb123/article/details/123313589

https://blog.51cto.com/xuedingmaojun/2967713?ivk_sa=1024320u

https://www.knowbaike.com/it/13131.html

webpack与vite的对比的更多相关文章

  1. vue-cli3 vue2 保留 webpack 支持 vite 成功实践

    大家好! 文本是为了提升开发效率及体验实践诞生的. 项目背景: 脚手架:vue-cli3,具体为 "@vue/cli-service": "^3.4.1" 库: ...

  2. 一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

    webpack.vite.vue-cli.create-vue 这些都是什么?看着有点晕,不要怕,我们一起来分辨一下. 先看这个表格: 脚手架 vue-cli create-vue 构建项目 vite ...

  3. Webpack与Vite热更新差异对比

    随着项目的日渐迭代,项目整体的代码量也会越来越多,从而导致项目体积越来越大:在Webpack时代,很多人会对历史项目(巨型项目)感到头疼,因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发H ...

  4. webpack不同devtools打包对比

    测试所用的配置文件: const path = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); co ...

  5. webpack 项目接入Vite的通用方案介绍(上)

    愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...

  6. antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎 ...

  7. Vite详解

    vite 目录 一.推荐两个插件插件 Volar Vue 3 Snippets 二.vite简介 优势分析 浏览器支持 三.vite搭建vue3.x项目 1.创建项目 2.集成Vue-Router 3 ...

  8. Webpack vs Rollup

    本文由作者余伯贤授权网易云社区发布. 2017年4月份的时候,Facebook将React的构建工具换成了Rollup.很多人就有疑问了,Webpack不也是Facebook团队开发的吗,为什么不使用 ...

  9. 爱搞事情的webpack

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency g ...

随机推荐

  1. java中的VO、PO、BO、DAO、POJO

     针对java工程里的各种带O的对象,进行分析,了解各自的作用. PO: persistent object,持久对象.与数据库里表字段一一对应.PO是一些属性,以及set和get方法组成.一般情况下 ...

  2. 自定义XML文件模板步骤

  3. servlet中的HttpServletResponse对象

    当有多个客户端浏览器去请求Tomcat时,Tomcat会为每一个客户端浏览器创建一对独立的HttpServletRequest与HttpServletResponse对象 HttpServletRes ...

  4. servlet中的HttpServletRequest对象

    HttpServletRequest对象表示客户端浏览器发起的请求,当客户端浏览器通过HTTP协议访问服务器时,Tomcat会将HTTP请求中的所有信息解析并封装在HttpServletRequest ...

  5. python学习笔记(六)——程序调试

    在我们平时编写程序时,常常会遇到各种错误,俗称BUG.而我们程序猿的工作常常需要对程序进行调试,也就是所谓的debug. 程序调试是将编制的程序投入实际运行前,用手工或编译程序等方法进行测试,修正语法 ...

  6. Linux文件管理 | Linux 文件基础知识

    目录 Linux 常用文件类别 Linux 目录结构概述 LInux 系统目录及说明 一.Linux 常用文件类别 1.文件   在Linux上系统上,有一切皆文件的说法,就是说任何软件和I/O设备都 ...

  7. poj_3253_priority queue

    描述 农夫约翰想要修篱墙,他需要N块木板,第i块板长Li.然后他买了一块很长的板子,足够他分成N块.忽略每次锯板子带来的损失. 约翰忘记买锯子了,于是像Don借.Don要收费,每次锯一下,就要收一次板 ...

  8. 可想实现一个自己的简单jQuery库?(五)

    Lesson-4 这个版本我们要增加一个用的非常多的方法! 那就是each! 我们知道each不仅能遍历数组,还能遍历对象. 首先我们需要一个对数组进行验证的方法 function isArray(o ...

  9. EMS设置发送连接器和接收连接器邮件大小

    任务:通过EMS命令设置发送接收连接器和接收连接器的邮件大小限制值为50MB. 以Exchange管理员身份打开EMS控制台.在PowerShell命令提示符下. 键入以下命令设置接收-连接器的最大邮 ...

  10. SpringMVC基于注解开发的步骤

    基于xml配置 .1准备好以下相关jar包 .2创建Maven项目使用骨架  (这里选择第二个以webapp结尾的非第一个) 给项目起个名字 这里可以更改maven本地仓库(依赖包所存放的地方)的路径 ...