与webpack类似的工具还有哪些?区别?

在这里插入图片描述


文章目录

  • 一、模块化工具
  • 二、详细对比
    • Rollup
    • Parcel
    • Snowpack
    • Vite
    • webpack
  • 参考文献


一、模块化工具

模块化是一种处理复杂系统分解为更好的可管理模块的方式

可以用来分割,组织和打包应用。每个模块完成一个特定的子功能,所有的模块按某种方法组装起来,成为一个整体(bundle)

在前端领域中,并非只有webpack这一款优秀的模块打包工具,还有其他类似的工具,例如Rollup、Parcel、snowpack,以及最近风头无两的Vite

通过这些模块打包工具,能够提高我们的开发效率,减少开发成本

这里没有提及gulp、grunt是因为它们只是定义为构建工具,不能类比


二、详细对比

Rollup

Rollup 是一款 ES Modules 打包器,从作用上来看,Rollup 与 Webpack 非常类似。不过相比于 Webpack,Rollup要小巧的多

现在很多我们熟知的库都都使用它进行打包,比如:Vue、React和three.js等

举个例子:

// ./src/messages.js
export default {hi: 'Hey Guys, I am zce~'
}// ./src/logger.js
export const log = msg => {console.log('---------- INFO ----------')console.log(msg)console.log('--------------------------')
}export const error = msg => {console.error('---------- ERROR ----------')console.error(msg)console.error('---------------------------')
}// ./src/index.js
import { log } from './logger'
import messages from './messages'
log(messages.hi)

然后通过rollup进行打包

$ npx rollup ./src/index.js --file ./dist/bundle.js

打包结果如下图
在这里插入图片描述
可以看到,代码非常简洁,完成不像webpack那样存在大量引导代码和模块函数

并且error方法由于没有被使用,输出的结果中并无error方法,可以看到,rollup默认开始Tree-shaking 优化输出结果

因此,可以看到Rollup的优点:

  • 代码效率更简洁、效率更高
  • 默认支持 Tree-shaking

但缺点也十分明显,加载其他类型的资源文件或者支持导入 CommonJS 模块,又或是编译 ES 新特性,这些额外的需求 Rollup需要使用插件去完成

综合来看,rollup并不适合开发应用使用,因为需要使用第三方模块,而目前第三方模块大多数使用CommonJs方式导出成员,并且rollup不支持HMR,使开发效率降低

但是在用于打包JavaScript 库时,rollup比 webpack 更有优势,因为其打包出来的代码更小、更快,其存在的缺点可以忽略

Parcel

Parcel ,是一款完全零配置的前端打包器,它提供了 “傻瓜式” 的使用体验,只需了解简单的命令,就能构建前端应用程序

Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口,但建议使用HTML文件作为入口,该HTML文件像平时一样正常编写代码、引用资源。如下所示:

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Parcel Tutorials</title>
</head>
<body><script src="main.js"></script>
</body>
</html>

main.js文件通过ES Moudle方法导入其他模块成员

// ./src/main.js
import { log } from './logger'
log('hello parcel')
// ./src/logger.js
export const log = msg => {console.log('---------- INFO ----------')console.log(msg)
}

运行之后,使用命令打包

npx parcel src/index.html

执行命令后,Parcel不仅打包了应用,同时也启动了一个开发服务器,跟webpack Dev Server一样

跟webpack类似,也支持模块热替换,但用法更简单

同时,Parcel有个十分好用的功能:支持自动安装依赖,像webpack开发阶段突然使用安装某个第三方依赖,必然会终止dev server然后安装再启动。而Parcel则免了这繁琐的工作流程

同时,Parcel能够零配置加载其他类型的资源文件,无须像webpack那样配置对应的loader

打包命令如下:

npx parcel src/index.html

由于打包过程是多进程同时工作,构建速度会比Webpack 快,输出文件也会被压缩,并且样式代码也会被单独提取到单个文件中
在这里插入图片描述
可以感受到,Parcel给开发者一种很大的自由度,只管去实现业务代码,其他事情用Parcel解决

Snowpack

Snowpack,是一种闪电般快速的前端构建工具,专为现代Web设计,较复杂的打包工具(如Webpack或Parcel)的替代方案,利用JavaScript的本机模块系统,避免不必要的工作并保持流畅的开发体验

开发阶段,每次保存单个文件时,Webpack和Parcel都需要重新构建和重新打包应用程序的整个bundle。而Snowpack为你的应用程序每个文件构建一次,就可以永久缓存,文件更改时,Snowpack会重新构建该单个文件

下图给出webpack与snowpack打包区别:
在这里插入图片描述
在重新构建每次变更时没有任何的时间浪费,只需要在浏览器中进行HMR更新

Vite

vite ,是一种新型前端构建工具,能够显著提升前端开发体验

它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了丰富的内建功能,如速度快到惊人的 [模块热更新HMR
  • 一套构建指令,它使用 Rollup打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源

其作用类似webpack+ webpack-dev-server,其特点如下:

  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译

vite会直接启动开发服务器,不需要进行打包操作,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快

利用现代浏览器支持ES Module的特性,当浏览器请求某个模块的时候,再根据需要对模块的内容进行编译,这种方式大大缩短了编译时间

原理图如下所示:
在这里插入图片描述
在热模块HMR方面,当修改一个模块的时候,仅需让浏览器重新请求该模块即可,无须像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高

webpack

相比上述的模块化工具,webpack大而全,很多常用的功能做到开箱即用。有两大最核心的特点:一切皆模块和按需加载

与其他构建工具相比,有如下优势:

  • 智能解析:对 CommonJS 、 AMD 、ES6 的语法做了兼容
  • 万物模块:对 js、css、图片等资源文件都支持打包
  • 开箱即用:HRM、Tree-shaking等功能
  • 代码分割:可以将代码切割成不同的 chunk,实现按需加载,降低了初始化时间
  • 插件系统,具有强大的 Plugin 接口,具有更好的灵活性和扩展性
  • 易于调试:支持 SourceUrls 和 SourceMaps
  • 快速运行:webpack 使用异步 IO 并具有多级缓存,这使得 webpack 很快且在增量编译上更加快
  • 生态环境好:社区更丰富,出现的问题更容易解决

参考文献

  • https://zhuanlan.zhihu.com/p/95684686
  • https://cn.vitejs.dev/guide/
  • https://segmentfault.com/a/1190000039370642

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/292250.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

stitcher类实现多图自动拼接

效果展示 第一组&#xff1a; 第二组&#xff1a; 第三组&#xff1a; 第四组&#xff1a; 运行代码 import os import sys import cv2 import numpy as npdef Stitch(imgs,savePath): stitcher cv2.Stitcher.create(cv2.Stitcher_PANORAMA)(result, pano) stitcher.st…

P-MapNet:Far-seeing Map Generator Enhanced by both SDMap and HDMap Priors

主页&#xff1a;homepage 参考代码&#xff1a;P-MapNet 动机与出发点 在感知系统中引入先验信息是可以提升静态元素感知网络的上限的&#xff0c;这篇文章对SD地图采用栅格化表示&#xff08;也就是图像形式&#xff09;&#xff0c;之后用CNN网络去抽取栅格化SD地图的信息&…

[技术笔记] Flash选型之基础知识芯片分类

1、按照接口分类 分为 Serial串口Flash 和 Parallel并口Flash&#xff1b; 市场大量使用Serial Flash&#xff1b;价格便宜&#xff1b;已满足系统对数据读写速度的要求&#xff1b; Serial Flash已经可以代表 NOR Flash&#xff1b; 小知识&#xff1a; 1&#xff09;在…

CVPR 2024 | 风格迁移和人像生成汇总!扩散模型diffusion用于经典AIGC方向

风格迁移 1、DEADiff: An Efficient Stylization Diffusion Model with Disentangled Representations 基于文本到图像扩散模型在迁移参考风格方面具有巨大潜力。然而&#xff0c;当前基于编码器的方法在迁移风格时显著损害了文本到图像模型的文本可控性。本文提出DEADiff来解决…

54 npm run serve 和 npm run build 输出的关联和差异

前言 通常来说 我们开发的时候一般会用到的命令是 “npm run serve”, “npm run build” 前者会编译当前项目, 然后将编译之后的结果以 node 的形式启动一个服务, 暴露相关业务资源, 因此 我们可以通过 该服务访问到当前项目 后者是编译当前项目, 然后做一下最小化代码的优…

(八)目标跟踪中参数估计(似然、贝叶斯估计)理论知识

目录 前言 一、统计学基础知识 &#xff08;一&#xff09;随机变量 &#xff08;二&#xff09;全概率公式 &#xff08;三&#xff09;高斯分布及其性质 二、似然是什么&#xff1f; &#xff08;一&#xff09;概率和似然 &#xff08;二&#xff09;极大似然估计 …

牛客NC153 信封嵌套问题【中等 动态规划,最长递增子序列 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/9bf77b5b018d4d24951c9a7edb40408f 相同的题目&#xff1a; https://www.lintcode.com/problem/602 思路 本质是求最长子序列问题envelopes 先按 w 升序排序&#xff0c;再按 h 降序 排序&#xff0c;只需考虑h…

深入探讨分布式ID生成方案

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起进步&am…

当代深度学习模型介绍--循环神经网络(RNNs)

AI大模型学习 方向一&#xff1a;AI大模型学习的理论基础 模型和应用的多样化&#xff1a;随着研究的深入&#xff0c;深度学习领域出现了多种创新的模型架构&#xff1a; 卷积神经网络&#xff08;CNNs&#xff09;专门针对图像处理任务进行了优化&#xff0c;通过模拟生物视…

node.js项目初始化操作

项目环境Vscode 1.新建一个文件夹node.js(xx.js) 2.右键点击node.js&#xff0c;点击打开终端 我在VScode打开终端 输入npm init初始化项目没反应。 解决方法&#xff1a;进入文件夹node.js&#xff0c;出入cmd跳转到终端 重新输入npm init命令 正确结果如下图 后续命令按下…

卫星影像监测非农化,非粮化在农业中的应用

一、引言 随着卫星遥感技术的发展&#xff0c;卫星影像在农业领域的应用越来越广泛。然而&#xff0c;随着城市化进程的加速和农业结构的调整&#xff0c;卫星影像观测的非农化、非粮化现象也越来越突出。本文将重点探讨卫星影像观测非农化、非粮化的原因、影响以及应对策略。 …

[linux] AttributeError: module ‘transformer_engine‘ has no attribute ‘pytorch‘

[BUG] AttributeError: module transformer_engine has no attribute pytorch Issue #696 NVIDIA/Megatron-LM GitHub 其中这个答案并没有解决我的问题&#xff1a; import flash_attn_2_cuda as flash_attn_cuda Traceback (most recent call last): File "<stdi…

Day62-Nginx四层负载均衡及结合7层负载均衡实践

Day62-Nginx四层负载均衡及结合7层负载均衡实践 1. 什么是四层负载均衡&#xff1f;2. 四层负载均衡的常用场景3. 百万并发百亿PV大规模架构4. L4和L7的区别及常用软件。5. lvs、nginx、haproxy区别6. nginx四层负载均衡&#xff08;tcp/ip&#xff0c;ip:port&#xff09;7. n…

深入理解element-plus table二次封装:从理论到实践的全面指南

前言 在许多中后台管理系统中&#xff0c;表格占据着半壁江山&#xff0c;如果使用element plus组件库&#xff0c;那么少不了要用到table组件&#xff0c;可是table组件的功能过于基础&#xff0c;因此&#xff0c;我在table组件的实现基础之上进一步封装&#xff0c;从而实现…

外贸独立站seo优化方案

对于外贸独立站而言&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;是吸引潜在客户、提升品牌曝光度和增加销售量的关键之一。但是&#xff0c;由于竞争激烈和市场的多样性&#xff0c;要想在搜索引擎上取得好的排名并非易事。本文将介绍一些外贸独立站SEO的有效方法&…

Kotlin 中的类和构造方法

Kotlin 中的类与接口和 Java 中的类与接口还是有区别的。例如&#xff0c;Koltin 中的接口可以包含属性声明&#xff0c;与 Java 不同的是。Kotlin 的声明默认是 final 和 public 的。此外&#xff0c;嵌套的类默认并不是内部类&#xff1a;它们并没有包含对其它外部类的隐式引…

QA:ubuntu22.04.4桌面版虚拟机鼠标丢失的解决方法

前言 在Windows11中的VMWare Workstation17.5.1 Pro上安装了Ubuntu22.04.4&#xff0c;在使用过程中发现&#xff0c;VM虚拟机的鼠标的光标会突然消失&#xff0c;但鼠标其他正常&#xff0c;就是光标不见了&#xff0c;下面是解决办法。 内容 如下图&#xff0c;输入mouse&a…

测试图片可否直接粘贴进csdn,后期删除

java图书管理系统mysqlswing版本 V1.0.1版 P1&#xff0c;简介项目功能&#xff1a; 运行主函数运行程序&#xff0c;进入管 理系统的登录界面

Kubeflow文档1:介绍与架构

Kubeflow 2024/3/19版本的文档 此专栏用来展示相关的内容翻译&#xff0c;重点关注本地部署&#xff0c;关于运营商的方案&#xff0c;请自行查阅 文档地址https://www.kubeflow.org/docs/ 开始编辑时间&#xff1a;2024/3/27&#xff1b;最后编辑时间2024/3/27 Kubeflow文…

使用1panel部署Ollama WebUI(dcoekr版)浅谈

文章目录 说明配置镜像加速Ollama WebUI容器部署Ollama WebUI使用问题解决&#xff1a;访问页面空白 说明 1Panel简化了docker的部署&#xff0c;提供了可视化的操作&#xff0c;但是我在尝试创建Ollama WebUI容器时&#xff0c;遇到了从github拉取镜像网速很慢的问题&#xf…