• vite和webpack的区别


    项目的构建是我们前端逃不开的话题。
    自从我们进入了前端框架时代,构建是我们逃不开的问题,因为前端应用越来越复杂。
    最近公司在从webpack过渡到vite.以下是我对他们的认识:

    what:

    • webpack是一个JavaScript应用程序的静态模块打包工具,它会对整个应用程序进行依赖关系图构建。
    • vite是构建工具的高阶封装,使用简单,快(开发的时候感觉没有编译过程),便于扩展。而他集成的esbuild(Go 编写) 预构建依赖,比node快 10-100 倍。
    和webpack的区别:
    1. 关注层级不同

    vite关注的层级更高:vite是 high level api,关注的是如何快速方便的搭建项目,相比webpack,减少了很多配置量。

    webpack关注的层级更低:webpack是low level api,因为webpack更关注的是各种功能的实现,重点放在构建上。

    1. vite自己不包含编译能力。

    它本身并不参与编译,它的编译能力只是集成了rollup和ESbuild的功能.

    1. 启动项目vite更快,可以说是超级快。

    对比webpack在dev-serve的时候,会提交所有编译的文件,而vite在dev-serve的时候利用了浏览器的native ES module功能,在浏览器请求对应的url时才提供文件,实现了根据路由的懒加载,所以启动的时候是超快的。

    1. vite的热更新更快。

    对比webpack的热更新,热更新时,把改动过模块的相关依赖模块全部编译一次。而vite热更新时,仅让浏览器重新请求改动过的模块。

    现在公司项目从webpack过渡到vite,还在不断摸索爬坑中,虽然目前vite的生态不如webpack丰富,且实用的开发者也不及webpack。
    但是不可否认的是,相比于webpack, vite非常适合项目的开发,webpack适合工具的开发


    • vite为构建项目而生
    • webpack为构建工具而生

  • 相关阅读:
    【MySQL】select语句——group by子句和having子句的使用
    QFusion数据库管理平台数据库集群创建及管理
    Day20.1:关于this、super的解析
    使用单调队列解决 “滑动窗口最大值” 问题
    ICPC2023深圳部分题解(A,D,E,F,G,K,L)
    Apache的安装与目录结构详细解说
    第3章业务功能开发(创建mybatis的逆向工程)
    C#获取每个月的一号到最后一天
    delve如何使用?
    HTTPS双向认证和如何生成证书
  • 原文地址:https://blog.csdn.net/u010463466/article/details/126508608