首页 > 其他分享 >构建工具

构建工具

时间:2023-05-10 23:22:23浏览次数:59  
标签:webpack 构建 vite 工具 Esbuild Vite

Vite: 下一代前端工具

Vite(读音类似于[weɪt],法语,快的意思) 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。

虽然 2021 年 webpack 仍然是毫无争议的构建之王,但活跃的前端社区,终于出现了一位 能打 的挑战者。

vite 一出手就直接瞄准了 webpack 最遭人诟病的软肋:“开发时构建实在太慢”。

vite 剑走偏锋,在 dev 时,通过 esbuild 进行 esm 格式进行模块加载,几乎实现了“秒开”的效果。让那些被 webpack 如同蜗牛般开发时构建速度折磨的研发人员直呼“牛哔”。

在生产构建时,vite 则通过对老牌构建工具 rollup 进行了适度封装,降低了普通开发者的介入难度。

无论你是 React 开发者亦或是 Vue 开发者,Vite 都是一款觉得值得尝试的工具。

相信我,你会爱上它的。

Esbuild: 贼快的Javascript打包器

Esbuild 官方认为:“当前所有其他打包工具,都比他们理应达到的速度慢了10-100倍。”

“我不是针对谁。而是在做的 webpack/rollup 等都不太行。”

为什么?

  • 它基于 golang,就是比 node.js 快。
  • 高度并行的处理算法。
  • 节制的功能设计。
  • 重写核心工具链。

2021 年, Esbuild 在前端圈可谓大放异彩,本年度最大黑马 Vite 也毫不犹豫地选择了 Esbuild 作为自己的构建工具之一。

可以说,在这个追求效率的年代,Esbuild 一定有更广阔的空间。

作者:春哥的梦想是摸鱼
链接:https://juejin.cn/post/7051598110316822542
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:webpack,构建,vite,工具,Esbuild,Vite
From: https://www.cnblogs.com/kitebear/p/17389663.html

相关文章

  • Go语言及开发工具LiteIDE的安装
    安装平台macGo语言安装下载go的安装包下载页面:https://golang.org/dl/另外参考http://godoc.golangtc.com/doc/install#install下载完go语言的安装包之后进行安装mac上默认的安装路径是/usr/local/go设置环境变量exportGOROOT=$HOME/goexportPATH=$PATH:$GOROOT/binGo语言开发......
  • 6个在线正则表达式工具
    正则表达式可以让开放人员更加有效的操纵文本内容,在各种各样的开发中经常会遇到需要正则表达式解决的问题,比如验证邮箱,验证网址,一些小偷程序的批量替换等等。熟练的应用正则表达式可以方便于很多文本的操作,加快开发的进度。但是正则表达式并不是一个非常简单......
  • 基于机器学习和人工智能的数据质量测试工具
    一、比较知名的工具(非完全免费)Trifacta:Trifacta:是一种自动数据质量检测和数据预处理工具,它使用机器学习算法来自动识别数据中的潜在问题,并建议数据清理操作。TalendDataQuality:TalendDataQuality是一种数据质量和数据清理工具,它使用机器学习算法来自动识别数据中的问题,......
  • JFreeChart构建柱状图
    JFreeChart构建柱状图前言Java开发中,可以采用许多库和框架来实现图表统计功能。以下是一些常见的Java图表统计库和框架:JFreeChart:JFreeChart是一个流行的Java图表库,可用于生成各种类型的图表,包括线图、柱状图、饼图等。Chart.js:Chart.js是一个基于HTML5Canvas的JavaScript图......
  • ReactRedux工具包reduxjs/toolkit的使用
    首先可以先看一下Redux如何工作store负责存储数据,相当于仓库,action负责dispatch派发数据,reducer负责接收处理数据然后交给store(个人理解可能有些偏差欢迎交流斧正)传统redux写法(旧)//reducerconstcounterReducer=(state={counter:0},action)=>{if(action.type......
  • [系统性能优化实践]JVM进阶实战之监控工具(Prometheus)
    1Prometheus监控SpringCloudGateway1.1简述API网关作为应用服务与外部交互的入口,通过对API网关的监控,可以清晰的知道应用整体的请求量,以便根据不同的并发情况进行扩容处理。对API网关的监控也是相当必要的。通过Prometheus监控Gateway与监控普通Springboot项目几乎......
  • 用Scrum工具Leangoo领歌做敏捷需求管理
    ​上一篇我们介绍了如何管理产品路线图(https://www.cnblogs.com/shineshine/p/17387367.html),这一篇我们介绍下如何管理产品Backlog。史诗故事通常都是比较大的故事,所以我们需要将史诗故事规划到产品Backlog中,以便让团队在产品Backlog中对史诗故事进行拆分,将其拆解为更小的用户故......
  • PMP工具与技术-4.9-1 规划采购管理工具与技术
    ##############################################################上一章,我们写了关于规划采购过程中的文件内容,包括合同类型选择、采购管理计划、采购策略、招标文件、采购工作说明书(SOW)等内容。这一章主要说明规划采购管理过程中适用的工具。###############################......
  • 用Leangoo领歌Scrum敏捷开发工具管理产品路线图?
    ​这里分享一下我们在用的一款敏捷开发项目管理软件,Leangoo领歌。看板的管理方式,可以很好的支持Scrum敏捷开发。有saas模式也有私有部署模式。Leangoo区别于传统项目管理软件,Leangoo基于最新web实时通信技术实现了所见即所得的可视化看板协同。项目的需求、任务、问题、缺陷都......
  • CSS学习1 认识CSS;三种CSS的编写样式;CSS注释;常见的CSS样式;元素link;CSS颜色表示方法;浏览
    1_认识CSSwhat:为网页添加样式(美化界面);一门样式表语言,不是编程语言发展历史css1(两个人合作发布)css2(w3c)css3(模块化持续发展中)总结:美化HTML,让HTML与CSS分离方式一:添加样式,例如颜色、字体,大小方式二:布局,按照某种结构显示2_三种CSS的编写样式声明:例如【color:red......