Webpack之后，Rollup如何引领前端打包新潮流？（1）

快速开始

安装rollup

pnpm add rollup -D

rollup基本命令行

.
├── package.json
└── src├── index.js└── util.js

index.js

import { getRandomNum } from "./util.js";
const r = getRandomNum(1, 10)
console.log(r)

util.js

/*** 随机数* @param {*} min 最小值* @param {*} max 最大值* @returns min-max之间的随机整数*/
export const getRandomNum = (min, max) => {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;
}/*** 深拷贝* @param obj 需要深拷贝的对象* @returns 深拷贝对象*/
export const deepClone = (obj) => {if(typeof obj !== 'object' || obj === null) {return obj}const result = Array.isArray(obj) ? [] : {};for(let key in obj) {if(obj.hasOwnProperty(key)) {result[key] = deepClone(obj[key])}}return result
}
export default {getRandomNum,deepClone}

查看命令行帮助

npx rollup -h

rollup基本命令行

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

可以看到打印结果基本和源码相差不大，而且，自动做了摇树优化，也就是把没有用到的代码自动的删除了

/*** 随机数* @param {*} min 最小值* @param {*} max 最大值* @returns min-max之间的随机整数*/
const getRandomNum = (min, max) => {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min + 1)) + min;
};const r = getRandomNum(1, 10);
console.log(r);

而且，我们还能选择编译的格式

对于浏览器：

# 编译为包含自执行函数（'iife'）的 <script>。
npx rollup src/index.js --file dist/bundle.js --format iife

对于 Node.js:

# 编译为一个 CommonJS 模块 ('cjs')
npx rollup src/index.js --file dist/bundle.js --format cjs

对于浏览器和 Node.js：

# UMD
npx rollup src/index.js --file dist/bundle.js --format umd

摇树优化(tree shaking)

除了可以使用 ES 模块之外，Rollup 还可以静态分析你导入的代码，并将排除任何实际上没有使用的内容，从上面的引入和最后的打包结果就可以看到，没有使用到的内容直接被删除了。

注意，摇树优化的核心思想是在编译阶段通过静态分析确定代码的使用情况，而不是在运行时。

所以摇树优化一般是建立在ES6 模块化语法基础之上的，ESM的导入导出是静态的。

CommonJS 模块的导入和导出是动态的，无法在编译阶段静态确定代码的使用情况。一般情况下，摇树优化工具无法在 CommonJS 模块中进行精确的摇树，因为无法静态分析模块间的导入和导出关系。

然而，一些构建工具（如 Webpack）会尝试通过静态分析和启发式方法对 CommonJS 模块进行近似的摇树优化。它们会尽可能地识别出那些可以在编译阶段确定未被使用的代码，并进行剔除。但这种处理方式可能不如对 ES6 模块的优化效果好，且有一定的限制。

摇树优化的原理：

  1. 静态分析：对 JavaScript 代码进行静态分析，识别出模块的导入和导出关系。
  2. 标记未使用代码：标记出在导入和导出关系上没有被使用的代码。这些代码可能是模块的导出函数、变量、类等。
  3. 剔除未使用代码：根据标记结果，构建工具会将未被使用的代码从最终的打包结果中剔除，只保留被使用的部分。

由于是静态分析，所以我们在写代码的时候，需要注意自己的写法，简单来说，尽量的使用最小导入，比如你可以比较一下我们这里导入代码之后，打包的区别：

// 直接默认导入整个对象
import util from "./util.js";
const r = util.getRandomNum(1, 10)
console.log(r)// 具名导入具体的函数
import { getRandomNum } from "./util.js";
const r = getRandomNum(1, 10)
console.log(r)

与webpack打包的区别

这个打包结果其实就已经和我们熟知的webpack有了很鲜明的区别，我们把webpack安装一下试试

pnpm add webpack webpack-cli -D

运行webpack-cli：

# --entry 入口文件 -o 打包文件夹位置 --mode 打包模式
npx webpack --entry ./src/index.js -o dist --mode development

/** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({/***/ "./src/index.js":
/*!**********************!*\!*** ./src/index.js ***!\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./util.js */ \"./src/util.js\");\n\nconst r = (0,_util_js__WEBPACK_IMPORTED_MODULE_0__.getRandomNum)(1, 10)\nconsole.log(r)\n\n//# sourceURL=webpack://rollup-demo/./src/index.js?");/***/ }),/***/ "./src/util.js":
/*!*********************!*\!*** ./src/util.js ***!\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   deepClone: () => (/* binding */ deepClone),\n/* harmony export */   flat: () => (/* binding */ flat),\n/* harmony export */   getRandomNum: () => (/* binding */ getRandomNum)\n/* harmony export */ });\n/**\n * 随机数\n * @param {*} min 最小值\n * @param {*} max 最大值\n * @returns min-max之间的随机整数\n */\nconst getRandomNum = (min, max) => {\n  min = Math.ceil(min);\n  max = Math.floor(max);\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\n/**\n * 深拷贝\n * @param obj 需要深拷贝的对象\n * @returns 深拷贝对象\n */\nconst deepClone = (obj) => {\n  if(typeof obj !== 'object' || obj === null) {\n    return obj\n  }\n  const result = Array.isArray(obj) ? [] : {};\n  for(let key in obj) {\n    if(obj.hasOwnProperty(key)) {\n      result[key] = deepClone(obj[key])\n    }\n  }\n  return result\n}\n\n/**\n * 数组扁平化\n * @param {*} arr 需要扁平化的数组\n * @returns 扁平化后的数组\n */\nconst flat = (arr) => {\n  let result = [];\n  for (let i = 0; i < arr.length; i++) {\n    if (Array.isArray(arr[i])) {\n      result = result.concat(flat(arr[i]));\n    } else {\n      result.push(arr[i]);\n    }\n  }\n  return result;\n}\n\n\n\n\n//# sourceURL=webpack://rollup-demo/./src/util.js?");/***/ })/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.js");
/******/ 	
/******/ })()
;

当然我们可以选择生成模式进行打包

npx webpack --entry ./src/index.js -o dist --mode production

(()=>{"use strict";const o=(t=1,a=10,t=Math.ceil(t),a=Math.floor(a),Math.floor(Math.random()*(a-t+1))+t);var t,a;console.log(o)})();

现在打包出来的内容就直接是压缩之后的代码了

配置文件

Rollup配置文件是一个 ES 模块。通常，它被称为 rollup.config.js 或 rollup.config.mjs，并位于项目的根目录中。它导出一个默认对象，其中包含所需的选项：

export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'esm'}
};

注意：nodejs环境下要运行esm模块化的内容，要么文件名后缀处理为**.mjs**，要么package.json文件中配置**“type”:“module”**，因为 Rollup 将遵循 Node ESM 语义。

要运行配置文件，可以在命令行执行

npx rollup -c

或者直接在package.json文件中配置script脚本

{......"type":"module","scripts": {"dev":"rollup -c"},......
}

配置时的智能提示

由于 Rollup 随附了 TypeScript 类型定义，因此你可以使用 JSDoc 类型提示来利用你的 IDE 的智能感知功能：

/*** @type {import('rollup').RollupOptions}* @description: rollup配置文件*/
export default {input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'umd',name: 'bundle'},
}

或者，你可以使用 defineConfig 辅助函数，它应该提供无需 JSDoc 注释即可使用智能感知的功能：

import { defineConfig } from 'rollup'export default defineConfig({input: 'src/index.js',output: {file: 'dist/bundle.js',format: 'umd',name: 'bundle'},
})

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

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

相关文章

基于深度学习CNN算法的花卉分类识别系统01--带数据集-pyqt5UI界面-全套源码

基于深度学习CNN算法的花卉分类识别系统01--带数据集-pyqt5UI界面-全套源码

文章目录 基于深度学习算法的花卉分类识别系统一、项目摘要二、项目运行效果三、项目文件介绍四、项目环境配置1、项目环境库2、环境配置视频教程 五、项目系统架构六、项目构建流程1、数据集2、算法网络Mobilenet3、网络模型训练4、训练好的模型预测5、UI界面设计-pyqt56、项目…
阅读更多...
【PCIE常见面试问题-1】

【PCIE常见面试问题-1】

PCIE常见面试问题-1 1 PCIE概述1.1 PCI为何发展开PCIE&#xff1f;1.2 什么是Root Complex(RC)1.3 什么是EP&#xff1f;1.4 什么是Swith1.5 PCIE协议如何组织通信的&#xff1f;1.6 简要介绍一下PCIE的分层结构&#xff0c;为什么需要分层&#xff1f;1.7 PCIE的事务类型有哪些…
阅读更多...
解决 Docker Desktop 启动报错：Docker Desktop is unable to detect a Hypervisor

解决 Docker Desktop 启动报错：Docker Desktop is unable to detect a Hypervisor

在使用 Docker Desktop 时&#xff0c;有时会遇到启动报错&#xff1a;“Docker Desktop is unable to detect a Hypervisor.” 这是由于系统的虚拟化功能未正确启用或配置导致的。本文将分步骤指导如何解决该问题。 一、检查虚拟化是否已启用 打开任务管理器 按下 Ctrl Shift…
阅读更多...
订单日记为“惠采科技”提供全方位的进销存管理支持

订单日记为“惠采科技”提供全方位的进销存管理支持

感谢温州惠采科技有限责任公司选择使用订单日记&#xff01; 温州惠采科技有限责任公司&#xff0c;成立于2024年&#xff0c;位于浙江省温州市&#xff0c;是一家以从事销售电气辅材为主的企业。 在业务不断壮大的过程中&#xff0c;想使用一种既能提升运营效率又能节省成本…
阅读更多...
rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

rust中解决DPI-1047: Cannot locate a 64-bit Oracle Client library问题

我们在使用rust-oracle crate连接oracle进行测试的过程中&#xff0c;会发现无法连接oracle&#xff0c;测试运行过程中抛出“DPI-1047: Cannot locate a 64-bit Oracle Client library”错误。该问题是由于rust-oracle需要用到oracle的动态连接库&#xff0c;我们通过安装orac…
阅读更多...
东方通重置管理员密码

东方通重置管理员密码

百度给出的回答 注意&#xff0c;箭头所指的密码是举例&#xff0c;不是自己的默认密码 自己的默认密码存储在下图位置 原文地址
阅读更多...
spark 写入mysql 中文数据 显示?? 或者 乱码

spark 写入mysql 中文数据 显示?? 或者 乱码

目录 前言 Spark报错&#xff1a; 解决办法&#xff1a; 总结一下&#xff1a; 报错&#xff1a; 解决&#xff1a; 前言 用spark写入mysql中&#xff0c;查看中文数据 显示?? 或者 乱码 Spark报错&#xff1a; Sat Nov 23 19:15:59 CST 2024 WARN: Establishing SSL…
阅读更多...
电子应用设计方案-20：智能电冰箱系统方案设计

电子应用设计方案-20：智能电冰箱系统方案设计

智能电冰箱系统方案设计 一、系统概述 本智能电冰箱系统旨在提供更便捷、高效、智能化的食品存储和管理解决方案&#xff0c;通过集成多种传感器、智能控制技术和联网功能&#xff0c;实现对冰箱内部环境的精确监测和控制&#xff0c;以及与用户的互动和远程管理。 二、系统组成…
阅读更多...
实验四：构建园区网（OSPF 动态路由）

实验四：构建园区网（OSPF 动态路由）

目录 一、实验简介 二、实验目的 三、实验需求 四、实验拓扑 五、实验步骤 1、在 eNSP 中部署网络 2、设计全网 IP 地址 3、配置二层交换机 4、配置路由交换机并测试通信 5、配置路由接口地址 6、配置 OSPF 动态路由&#xff0c;实现全网互通 一、实验简介 使用路由…
阅读更多...
【大数据学习 | Spark-Core】yarn-client与yarn-cluster的区别

【大数据学习 | Spark-Core】yarn-client与yarn-cluster的区别

1. yarn的提交命令 # yarn的提交命令参数 --master yarn #执行集群 --deploy-mode # 部署模式 --class #指定运行的类 --executor-memory #指定executor的内存 --executor-cores # 指定核数 --num-executors # 直接指定executor的数量 --queue # 指定队列 2. yarn-client模式…
阅读更多...
WEB攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

WEB攻防-通用漏洞文件上传二次渲染.htaccess变异免杀

知识点&#xff1a; 1、文件上传-二次渲染 2、文件上传-简单免杀变异 3、文件上传-.htaccess妙用 4、文件上传-PHP语言特性 1、上传后门时&#xff0c;文件内容带.就不行 这时可以上传一个转换后的ip地址&#xff0c;ip地址对应网站包含后门代码 转换后的int会在访问的时候…
阅读更多...
【汽车制动】汽车制动相关控制系统

【汽车制动】汽车制动相关控制系统

目录 1.ABS (Anti-lock Brake System&#xff0c;防抱死制动系统) 2.EBD&#xff08;Electronic Brake-force Distribution&#xff0c;电子制动力分配系统&#xff09; 3.TCS&#xff08;Traction Control System&#xff0c;牵引力控制系统&#xff09; 4.VDC&#xff08…
阅读更多...
【通俗理解】边际化技巧在概率论中的应用——从公式到实例

【通俗理解】边际化技巧在概率论中的应用——从公式到实例

【通俗理解】边际化技巧在概率论中的应用——从公式到实例 关键词提炼 #边际化技巧 #概率论 #联合概率 #条件概率 #积分计算 #概率分布 #贝叶斯推断 第一节&#xff1a;边际化技巧的类比与核心概念【尽可能通俗】 边际化技巧&#xff0c;就像是你在一个复杂的概率迷宫中&am…
阅读更多...
C#里怎么样使用线程暂停？

C#里怎么样使用线程暂停？

C#里怎么样使用线程暂停？ 如果一个线程没有任务在处理，并且又不进行暂停， 这时候，这个线程就会把当前这个CPU占满，即是所谓的死循环。 因此我们设计线程时，一定要知道线程在什么时候没有工作处理时， 就需要进入等待状态，不能再进行下去，否则会导致死循环， 只是耗费…
阅读更多...
Tri Mode Ethernet MAC IP核详解

Tri Mode Ethernet MAC IP核详解

本文对 Vivado 的三速 MAC IP 核&#xff08;Tri Mode Ethernet MAC&#xff0c;TEMAC&#xff09;进行介绍。 在自行实现三速以太网 MAC 控制器时&#xff0c;GMII/RGMII 接口可以通过 IDDR、ODDR 原语实现&#xff0c;然而实际使用中自己实现的模块性能不是很稳定&#xff08…
阅读更多...
项目实战：基于Vue3实现一个小相册

项目实战：基于Vue3实现一个小相册

相册的示例效果图 注意看注释... CSS部分&#xff1a; <style>/* 伪元素选择器&#xff0c;用于在具有clear_ele类的元素内部的末尾添加一个新的元素 */.clear_ele::after{ content: ""; /* 这个伪元素的内容属性必须有 *//* 块级元素&#xff0c;便于占据一…
阅读更多...
STM32F4----DCA数字量转换成模拟量

STM32F4----DCA数字量转换成模拟量

STM32F4----DCA数字量转换成模拟量 基本原理 上一节讲诉了ADC的具体原理与程序搭建https://blog.csdn.net/qq_35970934/article/details/143999874?spm1001.2014.3001.5501。这节讲DAC的原理和程序&#xff0c;在实际应用中&#xff0c;我们经常需要调节电压的输出大小&…
阅读更多...
Linux下通过DRM操作屏幕，发生行对齐 (stride)问题

Linux下通过DRM操作屏幕，发生行对齐 (stride)问题

前言 Linux下使用LVGL操作屏幕&#xff0c;屏幕尺寸是[280*1424]&#xff0c;不管如何设置LVGL的参数&#xff0c;屏幕的显示均为花屏&#xff0c;能看到有图像显示&#xff0c;但是图像是行错乱的。 ubuntu桌面系统显示正常 打印DRM看输出 drm: 280x1424 (0mm X 0mm) pixel …
阅读更多...
HTMLCSS：比赛记分卡

HTMLCSS：比赛记分卡

效果演示 这段 HTML 和 CSS 代码创建了一个卡片式的体育比赛信息展示组件&#xff0c;用于显示篮球比赛的两个队伍名称、比赛时间、比分以及一些装饰性的视觉元素。 HTML <div class"card"><div data-status"inprogress" class"teams"…
阅读更多...
Paper -- 3D建筑模型生成 -- GABLE: 基于高分辨率卫星影像的全国尺度精细3D建筑模型

Paper -- 3D建筑模型生成 -- GABLE: 基于高分辨率卫星影像的全国尺度精细3D建筑模型

基本信息 论文题目: GABLE: A first fine-grained 3D building model of China on a national scale from very high resolution satellite imagery 中文题目: GABLE: 基于高分辨率卫星影像的全国尺度精细3D建筑模型 作者及单位: – 多数作者来自中国科学院空间信息研究所&…
阅读更多...
最新文章

Copyright @ 2022~2023