打包原理 缺点 其他特点
webpack 解析各个模块的依赖关系 使用loader转换文件，使用plugin注入钩子，打包合并模块，最终生成bundle文件，使用express开启本地服务器， 浏览器请求的是bundle文件，也就是打包过后的文件。

1.各个模块之间的依赖关系过于复杂 会导致打包速度很慢

2.使用热更新时，改动一个模块，其他有依赖关系的模块也会重新进行打包

  
vite

使用koa开启本地服务器，没有webpack那样打包合并的过程，所以启动服务器很快，@vue/compiler-sfc会对模块进行编译 （修改一些引入文件的路径 css编译成js字符串）浏览器再请求编译好的模块。

1.项目的开发浏览器要支持esmodule

2.不能识别commonjs语法

1.使用热更时，改动一个模块，仅需让浏览器重新请求该模块即可  效率更高。

2.需要打包到生产环境时 vite使用的是rollup

3.有利用http2的缓存和压缩

webpack之webpack和vite的区别的更多相关文章

  1. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  2. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  3. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  4. 安装webpack和webpack打包（此文转自Henery）

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  5. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  6. [转]webpack中require和import的区别

    webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...

  7. webpack中require和import的区别

    commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js打包进引用它的文件中.这是最普遍的情形 ...

  8. 对webpack和gulp的理解和区别

    webpack是前端构建工具,称为模块打包机,webpack支持模块化:构建前端开发过程中常用的文件,如:js,css,html,img等:使用简单方便,自动化构建.webpack是通过loader( ...

  9. Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  10. Webpack与其他打包工具的区别

    webpack是一个模块化加载器兼打包工具,它同时支持AMD.CMD等加载规范.与其他模块化加载器相比,它有这些优势: 1.代码分割 webpack支持两种依赖加载:同步和异步.同步的依赖会在编译时直 ...

随机推荐

  1. SAP GGB0 校验

    需求,针对财务凭证分配号的要求 在满足条件下进行必填校验 在需要的位置 创建确认 创建步骤,一般通过点击就可以形成需要的前提逻辑,也可以通过 设置->专门方式 来进行自定义编写. 如果前提条件是 ...

  2. 记一次在MyBatis-Plus中 @TableField 自动填充中遇见的坑

    先放一张表生成策略对应的结果 值 描述 DEFAULT 默认不处理 INSERT 插入时填充字段 UPDATE 更新时填充字段 INSERT_UPDATE 插入和更新时填充字段 此处需要注意一下,如果 ...

  3. TCP三次握手和四次挥手的原因所在

    报文从运用层传送到运输层,运输层通过TCP三次握手和服务器建立连接,四次挥手释放连接. 为什么需要三次握手呢?为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误. 比如:client发出 ...

  4. vue验证码倒计时60s

    vue3验证码倒计时60s //倒计时60s const timeNum = ref(60); const countDown = ref(); const isShowSend = ref(true ...

  5. 【STM32】NVIC嵌套中断向量控制器与外部中断

    两种优先级 抢占优先级PreemptPriority:中断服务函数正在执行时,抢占优先级高的可以打断抢占优先级低的,实现中断的嵌套,相当于51的"高优先级" 响应优先级(子优先级) ...

  6. 20211306 实验四 Python综合实践

    学号 20211306 <Python程序设计>实验四报告 课程:<Python程序设计> 班级: 2113 姓名: 丁文博 学号:20211306 实验教师:王志强 实验日期 ...

  7. AD9834配置

    SPI设置 注意,虽然手册上CPOL(CLK空闲时电平)为低,但实测是是高电平 连接 SYNC 为片选引脚,使用时拉低 FSE/PSE为频率与相位寄存器选择,均拉低即可 void SPI_Write_ ...

  8. luogu 4886

    点分治好题 统计距离正常点分治统计即可,我们只需考虑何时达到最优 有两种情况: 第一:代价最大的询问两个端点在不同的两个子树中 因为这种情况下,无论根向那个子树移动都会等价地增加到达另一个端点的代价, ...

  9. app内打开外部第三方瞎下载链接

    Q:我用cordova开发项目,想在app内跳转外部链接,安装了cordova-plugin-inappbrowser后确实可以跳转,但是跳转的页面有个按钮,原本点击会下载app,现在点击后毫无反应, ...

  10. python基础篇 15-常用模块：random string sorted lambda函数

    一.random import os,random,sys,time,string print(random.randint(1,10)) # 产生随机的整数 print(random.uniform ...