【Javascript系列】Terser通过调用API来实现代码的压缩和优化功能

Terser通过调用API来实现代码的压缩和优化功能

  • 起源
  • 通过API来调用
  • API调用过程中的一个隐含的技术点 - 异步调用和Promise对象
  • 官方文档中的一个有点容易忽略和混淆的地方
  • 关于Promise

起源

书接 上回,对Terser的功能做了一个初步的探索。在官方的主页上,有API和CLI二种调用方式。下面先介绍API的调用方式。

通过API来调用

Terser官方对于API的调用示例如链接: Terser API Reference。下面我们通过几个文件来实验

minify.js

#!/usr/bin/env node
'use strict'const fse = require('fs-extra')
const { minify } = require("terser");// Global functions:// terser minify - pms.libv3.js
(minify({"pms.libv3.js": fse.readFileSync("pms.libv3.js", "utf-8")}, {})).then(res => {fse.writeFileSync("pms.libv3.min.js", res.code, "utf-8");
});

pms.libv3.js

function osmpTempKVPairs() {return {set: function(k, v) {localStorage.setItem(k, v);},get: function(k) {return localStorage.getItem(k);}}
}

API调用过程中的一个隐含的技术点 - 异步调用和Promise对象

细心的同学肯定发现了,minify()函数调用和fse.wirteFileSync()函数调用,没有按常规的方式一行一行的直接按顺序调用,而是以(minify()).then()的方式里进行回调。

原因是minify是一个异步函数,它在被调用后,就直接返回了,返回值是一个Promise对象。如果这个时候,顺序去调fse.writeFileSync(),会报错,因为minify还没有执行完压缩和优化的过程(尤其当文件比较大的时候,官方示例中没有提到)
在这里插入图片描述
所以,正确的做法是,在调用minify()之后 ,正确的方式是获取minify()的返回值Promise对象,继续调用Promise()对象的then()方法,在方法里写入压缩和优化后的代码到min.js文件。
在这里插入图片描述

官方文档中的一个有点容易忽略和混淆的地方

在这里插入图片描述

关于Promise

一个 Promise 必然处于以下几种状态之一:

  • 待定(pending):初始状态,既没有被兑现,也没有被拒绝。(如上文日志中的Pending状态)
  • 已兑现(fulfilled):意味着操作成功完成。
  • 已拒绝(rejected):意味着操作失败。

.then() 方法最多接受两个参数;第一个参数是 Promise 兑现时的回调函数(如上文中代码里的res),第二个参数是 Promise 拒绝时的回调函数。每个 .then() 返回一个新生成的 Promise 对象,可被用于链式调用。

MDN文档中对于Promise的说明,同时也有详细参考的例子。 : Promise 对象表示异步操作最终的完成(或失败)以及其结果值

各位同学自行打开链接查看。如果 有不明白的,随时给我留言,有问必回。

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

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

相关文章

Windows系统电脑本地部署AI音乐创作工具并实现无公网IP远程使用

文章目录 前言1. 本地部署2. 使用方法介绍3. 内网穿透工具下载安装4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统电脑上快速本地部署一个文字生成音乐的AI创作工具MusicGPT,并结合cpolar内网穿透工具实现随时随地远程访问使用。 MusicG…

SRE养成计划之03-用户与组权限(持续更新)

用户与组 概念 用户作用: 登陆操作系统方便做权限的不同设置用户的唯一标识:UIDLinux系统默认管理员root,管理员root的UID为0 组的作用 方便管理众多的用户,方便对用户进行分类 组的唯一标识:GID 组的分类&#xf…

22、matlab锯齿波、三角波、方波:rectpuls()函数/sawtooth()函数/square()函数

1、采样的非周期性矩形 语法 语法1:y rectpuls(t) 返回一个以数组 t 中指示的采样时间采样的连续非周期性单位高度矩形脉冲,该矩形脉冲以 t 0 为中心。 语法2:y rectpuls(t,w) 生成一个宽度为 w 的矩形 参数 t:采样时间 w:矩形宽度…

两步教你学会内网穿透

文章目录 1.下载安装ngrok安装包2.生成固定的域名3.访问 1.下载安装ngrok安装包 1.注册登录ngrok网站ngrok官网 页面下滑点击下载下载: 2.解压(双击ngrok.exe进入终端) 3.终端绑定账户信息(复制如下图信息到终端) …

力扣2379.得到k个黑块的最少涂色次数

力扣2379.得到k个黑块的最少涂色次数 i为右端点 class Solution {public:int minimumRecolors(string blocks, int k) {int w0;for(int i0;i<k;i){if(blocks[i] W) w;}int res w;for(int ik;i<blocks.size();i){w (blocks[i] W) - (blocks[i-k] W);res min(res,…

Win11下只支持IE浏览器的老网站顺畅运行的方法

在Windows 11操作系统中&#xff0c;由于Internet Explorer&#xff08;IE&#xff09;浏览器的逐步淘汰&#xff0c;微软官方已不再直接支持IE浏览器。然而&#xff0c;当您遇到必须访问仅支持IE的老旧网站时&#xff0c;Windows 11仍然提供了一些实用的替代方案来应对这一挑战…

前端加载,渲染十万条数据(性能优化)

1.场景 项目中某个弹窗展示设备信息卡片,返回的设备信息很多,页面样式有很花哨,导致渲染极其缓慢 f12,查看性能,这里可以看到页面加载在哪一步分耗时最长,针对性进行优化(图为举例) 2.解决思路 采用虚拟列表的方式,滚动时,dom元素数量不变,只改变展示的数据 结构描述: 父盒…

快速入门文件操作+5种例子演示

文件操作 基本操作注意事项例子1&#xff1a;读取文件内容例子2&#xff1a;写入文件内容例子3&#xff1a;追加文件内容例子4&#xff1a;读取并写入文件内容&#xff08;复制文件&#xff09;例子5&#xff1a;使用二进制模式读写文件 基本操作 在C语言中&#xff0c;使用文…

项目中统一异常处理

项目中统一异常处理 1.异常处理框架图2.实现 1.异常处理框架图 异常处理除了输出在日志中&#xff0c;还需要提示给用户&#xff0c;前端和后端需要作一些约定&#xff1a; 错误提示信息统一以json格式返回给前端。以HTTP状态码决定当前是否出错&#xff0c;非200为操作异常。…

在国内PMP含金量并不高?

PMP已经在全球194个国家和地区得到广泛认可&#xff0c;自1999年开始在国内实施。PMP被认为是项目管理专业身份的象征&#xff0c;是项目经理最重要的资质。获得PMP证书意味着个人的项目操作水平已经得到了PMI的认可&#xff0c;具备国际专业项目操作者水平&#xff0c;有资格专…

就凭这张图,下订华为享界S9

文 | Auto芯球 作者 | 雷慢 冲啦&#xff01;就在刚刚&#xff0c; 我们团队下订了一辆享界S9&#xff0c; 还琢磨买奔驰S级&#xff0c;宝马7系和奥迪A8的老板们&#xff0c; 是应该试试享界S9了&#xff0c; 至少先占个坑&#xff0c;8月底S9上市当天&#xff0c; 可以…

Linux 系统中的用户与用户组管理

Linux 系统中的用户与用户组管理 Linux系统是一个多用户多任务的分时操作系统&#xff0c;任何一个要使用系统资源的用户&#xff0c;都必须首先向系统管理员申请一个账号&#xff0c;然后以这个账号的身份进入系统。 用户的账号一方面可以帮助系统管理员对使用系统的用户进行…

【vscode免密连接云服务器】

目录&#xff1a; 前言1.1 生成 SSH 密钥对1.2 将公钥复制到远程服务器1.3配置remote ssh 插件信息 总结 前言 剑指offer&#xff1a;一年又120天 1.1 生成 SSH 密钥对 在本地cmd命令窗口执行: ssh-keygen -t rsa会提示你设置生成密钥的文件、密码等等&#xff0c;可以一路回…

Flask启动重复注册schedule问题

最近flask里面新加个schedule任务&#xff0c;但是启动的时候看log&#xff0c;schedule被注册了两次。导致每次任务都会被执行两次&#xff0c;查了下解决方案&#xff0c;记录 加一个标志位就行了 import osfrom flask import Flask from apscheduler.schedulers.backgroun…

【Makefile笔记】小白入门篇

【Makefile笔记】小白入门篇 文章目录 【Makefile笔记】小白入门篇所需组件一、简单了解Makefile1.Makefile简介2.Makefile 原理 二、为什么要使用Makefile1.解决编译时链库的不便2.提高编译效率&#xff0c;缩短编译时间&#xff08;尤其是大工程&#xff09; 三、Makefile语法…

创建线程的技术难点

在软件开发中&#xff0c;创建线程并正确地管理它们是一个复杂而关键的任务&#xff0c;涉及的技术难点主要有&#xff1a; 线程同步&#xff1a;当多个线程需要访问共享资源时&#xff0c;必须确保它们以某种方式同步&#xff0c;以避免数据不一致或其他并发问题。例如&#…

css 图片上添加模糊背景的文字内容

html部分 <div class"onlogo"> <img src"../assets/img/banner.png" /><div class"imgText"><div class"title">一体化电子印章应用服务</div><div class"content">为企业提供安全可靠…

迭代器的使用

参考&#xff1a; 生成器迭代器next函数 迭代器的使用 说到迭代器就必须先要提一下可迭代对象&#xff08;iterable&#xff09;&#xff0c;可迭代对象是能够逐一返回其成员项的对象。可迭代对象包括序列类型&#xff08;如list、str、tuple&#xff09;和非序列类型&#…

SpringCloud Consul基础入门与使用实践总结

【1】Consul简介 官网地址&#xff1a;https://www.consul.io/intro/index.html 下载地址&#xff1a;https://www.consul.io/downloads.html 中文文档&#xff1a;https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…

JavaWeb前端有哪些:深度解析与全面概览

JavaWeb前端有哪些&#xff1a;深度解析与全面概览 在JavaWeb开发领域&#xff0c;前端技术扮演着至关重要的角色。那么&#xff0c;JavaWeb前端究竟包含哪些内容呢&#xff1f;本文将从四个方面、五个方面、六个方面和七个方面&#xff0c;为您深入剖析JavaWeb前端的技术栈和…