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. Django中的信号signals

    什么是信号? jango的信号机制就是事件驱动模型,一个事件可以被多个函数注册,当一个动作行为触发了这个事件后,这个事件所对应的函数便执行相应的操作; 内置信号; django 内部有些定义好的sig ...

  2. JVM的基础知识

    一.JVM的基础知识 1.JVM内存结构: 1.JVM堆内存结构: 2.JVM内存分配: 3.Java的堆机构和垃圾回收: 4.Jvm堆内存配置参数: 5.JVM新生代概念和配置: 6.JVM老生代概 ...

  3. 时间工具类之"获取相差天数"

    一.时间工具类DateUtils之"获取相差天数" 1 /** 2 * 相差天数 3 * 4 * <p>TODO 方法功能描述 5 * 6 * @param start ...

  4. 如何解决Ubuntu下的“E: Unable to correct problems, you have held broken packages.”的问题. aptitude

    今天安装build-essential时出现了以下问题,这属于包的依赖. 解决方案: 1,sudo apt-get install aptitude:完成aptitude命令安装 2,sudo apt ...

  5. Linux基础学习 | 用户及用户组

    Linux 用户及用户组 目录 一.用户    添加用户实例 二.用户组    添加用户组实例 三.用户及用户组文件 四.各命令参数对照 一.用户 Linux系统是一个多用户多任务的分时操作系统.任何 ...

  6. Linux基础学习 | 目录及文件

    一.目录结构 Linux目录采用树形结构,以根目录/向下延伸呈一个倒置的树的形状. 每个目录下都有其相对应的子目录,而子目录中又有其子目录的存在,就像一棵树的树枝分叉,所有的目录层次结构分明,每个目录 ...

  7. 3.3转1.8V(电平转换)

  8. 网络协议之:socket协议详解之Datagram Socket

    目录 简介 什么是Datagram Socket 使用socat来创建UDP服务 使用ss命令来监控Datagram Sockets 使用nc建立和UDP Socket的连接 总结 简介 上一篇文章我 ...

  9. 好用开源的C#快速开发平台

    NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展,让Web开发更迅速.简单.NFine是一套基于 ASP.NET ...

  10. chrome插件one-read开发1:准备

    阅读我的博客文章:chrome插件one-read开发:准备 前言 为啥要做这个,因为我原本想用chrome做一个书签管理的东西,但是很久没有碰过chrome的插件开发了.所以先做一个简单的,来熟悉下 ...