vite和webpack的区别
项目的构建是我们前端逃不开的话题。
自从我们进入了前端框架时代，构建是我们逃不开的问题，因为前端应用越来越复杂。
最近公司在从webpack过渡到vite.以下是我对他们的认识：
what:
- webpack是一个JavaScript应用程序的静态模块打包工具，它会对整个应用程序进行依赖关系图构建。
- vite是构建工具的高阶封装，使用简单，快（开发的时候感觉没有编译过程），便于扩展。而他集成的esbuild(Go 编写) 预构建依赖，比node快 10-100 倍。
和webpack的区别：
关注层级不同
vite关注的层级更高：vite是 high level api，关注的是如何快速方便的搭建项目，相比webpack，减少了很多配置量。
webpack关注的层级更低：webpack是low level api，因为webpack更关注的是各种功能的实现，重点放在构建上。
vite自己不包含编译能力。
它本身并不参与编译，它的编译能力只是集成了rollup和ESbuild的功能.
启动项目vite更快，可以说是超级快。
对比webpack在dev-serve的时候，会提交所有编译的文件，而vite在dev-serve的时候利用了浏览器的native ES module功能，在浏览器请求对应的url时才提供文件，实现了根据路由的懒加载，所以启动的时候是超快的。
vite的热更新更快。
对比webpack的热更新，热更新时，把改动过模块的相关依赖模块全部编译一次。而vite热更新时，仅让浏览器重新请求改动过的模块。
现在公司项目从webpack过渡到vite,还在不断摸索爬坑中，虽然目前vite的生态不如webpack丰富，且实用的开发者也不及webpack。
但是不可否认的是，相比于webpack, vite非常适合项目的开发，webpack适合工具的开发。
- vite为构建项目而生
- webpack为构建工具而生
vite和webpack的区别相关推荐
- 轻量迅捷时代，Vite 与Webpack 谁赢谁输
你知道Vite和Webpack吗?也许有不少"程序猿"对它们十分熟悉. Webpack Webpack是一个JavaScript应用程序的静态模块打包工具,它会对整个应用程序进行依 ...
- 项目中选择Vite还是Webpack
点击下方"青年码农"关注 回复"源码"可获取软件,源码等资料 Vite和Webpack都是现代化的前端构建工具,用于打包.编译.压缩和优化前端代码.它们的主要目 ...
- vite和webpack
Vite构建工具 vite对比webpack 一:打包原理 1:webpack打包过程 识别入口文件--->逐层识别模块依赖---->分析代码--->编译代码--->输出代码- ...
- Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
Rollup 介绍 Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序.Rollup 对代码模块使用新的标准化格式,这些标准都 ...
- webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别
原文地址:webpack源码阅读--npm脚本执行webpack与命令行输入webpack执行的区别 如有错误,欢迎指正! webpack是目前被大家广为使用的模块打包器.从命令行输入webpack或 ...
- Gulp和webpack的区别
背景:今天了解了大厂前端任职的一些要求:里面写了要熟悉webpack打包工具和Gulp构建工具,作为前端新人,看到这个就想这两种工具有什么区别? 在这里解答一下自已,而且希望可以帮助到有疑问的人. G ...
- Vite与webpack优势
Vite: 快 缓存: 依赖库缓存:库编译结果@/node-modules/.vite http缓存:源码协商缓存.模块强缓存 esbuild: go语言 速度比webpack快10-100倍 nat ...
- gulp与webpack的区别
常有人拿gulp与webpack来比较,知道这两个构建工具功能上有重叠的地方,可单用,也可一起用,但本质的区别就没有那么清晰. gulp gulp强调的是前端开发的工作流程,我们可以通过配置一系列的t ...
- vite以及webpack(@vue/cli 5.x) vue3 alias别名配置
一.vite 之前写了一个vite的项目,配置找了半天,结果如下: import { defineConfig } from 'vite' import vue from '@vitejs/plugi ...
最新文章
- 自动驾驶车辆何时实现？近期不会实现的五大原因
- RAC 实例 迁移到 单实例 -- 使用导出导入
- 错误 未找到引用源_你不理解的EXCEL函数中常见的错误值，都在这里
- JavaScript 原型链学习（二）原型的动态性
- 单人制作游戏手册之五：好看的素材令人心旷神怡！
- android String的replace和replaceAll的使用
- 我的世界服务器怎么修改书与笔,我的世界书与笔怎么做 我的世界书与笔怎么用...
- PHP随机静态页面生成系统源码雨尘SEO系统v1.3
- 求0-999之间的水仙花数。
- Leetcode每日一题：101.symmetric-tree(对称二叉树)
- POJ 3761 Bubble Sort（乘方取模）
- 并发编程之Lock接口
- Linux内存映射实现
- 基于个性化的电影推荐系统全流程设计
- 问题adb remount提示Devices Locked
- 宇宙机器人超级计算机,宇宙机器人无线控制器使用指南白金攻略
- IBM笔记本使用法语输入法，如何键入法语特殊字符？
- 揭秘！苏宁“融合基础设施”型零售实践大解析
- 云队友丨中国互联网反垄断简史
- datastage7.5.1.A License 及 下载地址 Download