webpack -vite(Rollup )-Gulp (一)

server/2024/9/23 4:27:54/

vite基于什么打包

Vite 是一个现代的前端构建工具,它在开发环境中利用浏览器原生的 ES 模块加载机制实现快速启动和热更新,而在生产环境打包时,默认基于 Rollup 进行构建。Rollup 是一个JavaScript 模块打包器,尤其擅长处理 ES 模块并产出优化过的静态资源。

此外,早期的Vite开发版本可能曾经基于 esbuild 进行预构建以提升开发环境下的启动速度,但最终在生产构建阶段依然采用 Rollup 来完成代码的压缩、优化和打包。这意味着Vite结合了不同的工具的优势,从而实现了高效开发和高质量的生产环境打包。

webpack基于什么打包

webpack 是基于自身的模块解析与处理机制进行打包的。具体来说:

  1. 模块解析webpack 读取项目的入口起点(entry point),然后递归地解析这些模块以及它们所依赖的模块,形成一个完整的模块依赖图(dependency graph)。

  2. 模块加载(Loader)webpack 使用 loader 转换模块的源代码。Loader 可以用来处理不同类型的资源(如 JavaScript、CSS、图片等),使其能被浏览器识别和执行。例如,babel-loader 用来转换 ES6+ 代码为 ES5,sass-loader 将 Sass/SCSS 样式编译为 CSS。

  3. 插件系统(Plugin)webpack 在构建过程中触发一系列事件,插件可以监听这些事件并在适当的时机执行任务,比如代码分割、资源优化、生成 HTML 文件、处理静态资源等。plugins 提供了一种扩展 webpack 功能的方式。

  4. 输出(Output)webpack 根据配置文件中指定的输出规则,将处理后的模块合并、压缩(如果配置了相应插件的话)并输出到指定的目录和文件名中。

  5. 优化(Optimization)webpack 内置了一些优化策略,同时也允许通过配置项和插件来自定义优化规则,比如代码压缩、公共代码提取、tree shaking(去除未使用的代码)等。

总结起来,webpack 是基于其强大的模块化系统、丰富的loader支持、灵活的插件架构以及优化机制来实现对现代JavaScript应用程序的打包处理。

esbuild、Rollup 和 webpack 都是前端开发中常用的构建工具,它们各自具有独特的特性和应用场景:

esbuild

  • 特点:esbuild 是一款用 Go 语言编写的超高速打包构建工具,强调的是构建速度,比传统的 JavaScript 构建工具如 webpack 和 Rollup 快数十倍甚至上百倍。

  • 适用场景:esbuild 主要用于快速开发阶段的编译和构建,尤其是大型项目中对构建速度有极高要求的情况。

  • 功能:esbuild 支持 JavaScript 和 TypeScript 的转换、CSS 和 HTML 的处理,具备基本的 Tree Shaking 功能,但目前插件生态相对较小,部分高级功能(如 CSS Modules、PostCSS 等)需要借助第三方解决方案。

Rollup

  • 特点:Rollup 是一款专门针对库打包的工具,侧重于将模块“roll up”(打包在一起),尤其擅长处理 ES 模块并生成无冗余代码的包。

  • 适用场景:非常适合用于开发库和组件,因为其优秀的 Tree Shaking 能力可以剔除未使用的代码,使输出的库体积更小。

  • 功能:Rollup 通过丰富的插件系统支持多种预处理器、转译器以及各种构建过程的需求,但相较于 webpack,其在大型应用项目的构建支持上略显不足。

webpack

  • 特点webpack 是一款成熟的模块打包工具,拥有庞大的生态系统和高度的灵活性。

  • 适用场景:无论是小型项目还是大型单页面应用、多页面应用,甚至是混合移动应用,webpack 几乎都能胜任。

  • 功能webpack 支持各种模块格式(CommonJS、AMD、ES 模块等),通过 loader 能够处理各种类型的资源(JS、CSS、图片等),并通过 plugin 扩展大量功能,如代码拆分、懒加载、Tree Shaking、优化、资源管理等。

总结来说,esbuild 更注重构建速度,适合快速迭代开发阶段;Rollup 更适用于库和组件的打包,注重生成最小化的代码;而 webpack 则是一款全能型的构建工具,适合各种规模和类型的前端项目,但在构建速度上可能不如 esbuild 快速。

Gulp

  • 定位:基于流的自动化构建工具。

  • 核心功能:Gulp 不直接负责打包和编译,而是通过一系列任务流程来组织和执行各种构建工作,如文件读写、编译、压缩、合并等。

  • 工作原理:用户定义一系列任务,并使用各种插件来完成这些任务,例如 Sass 编译、JavaScript 压缩等。Gulp 的优势在于它能快速高效地处理大量文件流。

总的来说:

  • esbuild 专注于极致速度的打包和编译。

  • Rollup 是理想的库和组件打包工具,尤其关注输出文件的体积优化。

  • webpack 是一个全方位的项目构建工具,涵盖了从开发到生产的各种构建需求。

  • Gulp 提供了一种灵活的任务构建方式,开发者可以自定义复杂的构建流程,但本身并不包含具体编译和打包的功能,而是依赖于社区插件来完成这些任务。


http://www.ppmy.cn/server/6614.html

相关文章

文件系统和软硬链接

文章目录 文件系统磁盘磁盘逻辑抽象inode 软硬链接软链接硬链接 文件系统 文件分为打开的文件和没有被打开的文件,而只有打开的文件是在内存的,也就是我们之前讲的,然而大部分文件都不是被打开的(当前不需要被访问的),它们都在磁…

js生成pdf

js生成pdf html->img->pdf 下载依赖 npm install html2canvas npm install jspdf引入依赖 import html2canvas from "html2canvas" import jsPDF from jspdf;代码 const A4_WIDTH 595.28 const A4_HEIGHT 841.89 //参数 html(dom) imgsrc(封面可不加&am…

Linux 软件包工具rpmbuild

下载工具rpm-build yum search rpm-build yum install rpm-build.x86_64制作属于自己的RPM包 1.准备打包目录 ls rpmbuild/ BUILD BUILDROOT RPMS SOURCES SPECS SRPMS 2.放入软件包 cp /root/nginx-1.18.0.tar.gz rpmbuild/SOURCES/ 3.编辑spec文件 vim rpmbuild/SPECS/n…

【超级简单】vscode进入服务器的docker容器

前提 1、已经运行docker容器 2、已经用vscode链接服务器 在vscode中安装的插件 Dev Containers docker 在容器中安装的依赖 yum install openssh-server yum install openssh-clientsvscode进入服务器的docker容器 找到自己的容器,右键点击,找到…

数仓建模—数据模型

数仓建模—数据模型 前面我们讲了什么是数据仓库,以及数据仓库的发展历史,从这里开始我们讲解数仓建模,在开始之前我们先了解一下什么是数据模型,以及常见的数据模型都有哪些 什么是数据模型 在详细探讨数据模型之前,我们需要明确什么是数据。从本质上讲,数据由收集、…

使用Docker搭建Redis主从集群

文章目录 ☃️前言☃️搭建❄️❄️架构❄️❄️实例说明❄️❄️搭建第一个服务器上的两个实例❄️❄️搭建第二个服务器上的一个实例 ☃️开启主从❄️❄️改配置❄️❄️重启从节点 ☃️验证 ☃️前言 单节点 Redis 的并发能力是有上限的,要进一步提高Redis的并…

LeetCode———100——相同的树

目录 ​编辑 1.题目 2.解答 1.题目 . - 力扣(LeetCode) 给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的。 示例 1&…

计算机视觉——手机目标检测数据集

这是一个手机目标检测的数据集,数据集的标注工具是labelimg,数据格式是voc格式,要训练yolo模型的话,可以使用脚本改成txt格式,数据集标注了手机,标签名:telephone,数据集总共有1960张,有一部分是…