首页
学习
活动
专区
工具
TVP
发布

工程化(8): JS 体积优化之代码压缩混淆的原理是什么?

---- 通过 AST 分析,根据一些策略,来生成一颗更小体积的 AST 并生成代码。现代前端工程中,一般使用 terser 进行压缩混淆 JS。...当我们把所有的空白符合注释都去掉之后,代码体积会得到减少。 「去掉多余字符之后,文件大小已经变为 30 Byte。」...压缩代码如下: function sum(a,b){return a+b} 替换掉多余字符后会有什么问题产生呢? 「有,比如多行代码压缩到一行时要注意行尾分号。」...,当完成代码压缩 (compress) 时,代码的混淆 (mangle) 也捎带完成。...解析程序逻辑:合并声明以及布尔值简化 通过分析代码逻辑,可对代码改写为更精简的形式。

1.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

JS 图片压缩

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...缺点:只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果,其他图片格式,仅能通过调节尺寸来实现 代码实现 <div class="container"...,不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 将 File 对象通过 FileReader 的 readAsDataURL 方法转换为

25.3K21

图片压缩原理

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...缺点:只有 jpeg 、webp 支持原图尺寸下图片质量的调整来达到压缩图片的效果,其他图片格式,仅能通过调节尺寸来实现 代码实现 <div class="container"...,不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 将 File 对象通过 FileReader 的 readAsDataURL 方法转换为

4.6K31

使用uglifyjs压缩js

在做的web项目上线时,我们需要对js文件进行压缩,以减小文件的体积,加快加载速度,提高响应时间。下面我来介绍一个js压缩工具:uglifyjs。...-b,--beautify 美化代码格式的参数 -m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到)a,b,c,d,e,f之类的变量...--comments 用来控制注释的代码的 如果压缩的时候想要保留版权信息,可以如下使用: uglifyjs main.js --comments -m -o main-min.js 当然,...uglifyjs压缩批处理 我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉。...完整代码如下: @echo off :: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS SET JSFOLDER=C:\Users\Administrator\Desktop\formini

5.5K20

Redis 内存压缩原理

quicklist set hashtable intset hash ziplist hashtable zset(sortedset) ziplist skiplist 本文接下来将详细说明各种压缩编码的原理以及编码决定规则...ziplist 存储为一段裸二进制数据(unsigned char *), 可以看到源代码中大量使用宏进行定义,虽然节省了大量内存但是代码可读性较低。...压缩中间节点 对于一个很长的列表而言,最常使用的是其两端的数据,中间数据被访问的概率较低。因此,quicklist 允许将中间的节点使用 LZF 算法进行压缩以节省内存。...list-compress-depth 表示quicklist两端不被压缩的节点个数: 0: 表示都不压缩。这是Redis的默认值。...1: 表示quicklist两端各有1个节点不压缩,中间的节点压缩。 2: 表示quicklist两端各有2个节点不压缩,中间的节点压缩

90530

详解 JS 压缩图片

插播一下,本文案例已整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。...JavaScript 操作压缩图片原理不难,已有成熟 API,然而在实际输出压缩后结果却总有意外,有些图片竟会越压缩越大,加之终端(手机)类型众多,有些手机压缩图片甚至变黑。 ?...但只要有代码在引用对象 URL,内存就不会释放。要手工释放内存,可以把对象 URL 传给 window.revokeObjectURL()。...options.convertSize && options.mimeType === 'image/png') { options.mimeType = 'image/jpeg'; } // 省略一些代码...将改进版图片压缩整理成插件,已上传 npm ,可通过 npm install js-image-compressor -D 安装使用,可以从 github 下载。 整理匆忙,如有问题欢迎大家指正,完~

12.5K31

JavaScript代码压缩细节

前言 对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小。...为了方便理解和对比,本文会给出压缩前后代码作为参考,但压缩后的代码仍会换行,变量名字不做混淆处理,同时一个压缩规则的例子会尽量不混其它压缩策略进去。 1....的压缩 对a>=b取非可以得到a<b,对a&&b取非可以得到!a||!b。如果转换后的结果能得到更短的代码,那就将这个取非的表达式换成转换后的表达式。 压缩前 !(a>=b) !!!a 12 !...  function B(){ }   return false;   var a = 1; } 规则6.4 合并块末尾的return语句及其前边的多条表达式语句 其实这条规则看起来并不会使最后生成的代码缩小...C){   D(); } 规则7.3 尝试反转if/else分支,看看生成代码是否更短 尝试对if条件取非,如果能得到更短的代码,那就反转if/else分支。 压缩前 if (!

1.1K20

视频压缩原理入门

转载自 奇舞周刊,文章有删减 作者郭文涛@奇舞团前端工程师 背景 短视频大行其道的年代,作为程序员势必需要了解:视频编辑背后的原理和技术。 想要了解视频原理,首先应该从图像原理开始说起。...视频压缩原理 主要是将视频像素数据(RGB,YUV 等)压缩成为视频码流,从而降低视频的数据量,也就是处理像素。 YUV: 和RGB一样是一种颜色编码格式,相比RGB更利于压缩。...视频压缩分为下面两种类型: 1. 帧内压缩 也叫空间压缩,类似于图像压缩,属于有损压缩算法,达不到很高的压缩比。 2....音频压缩原理 音频压缩是在保证信号在听觉方面不产生失真的前提下,对音频数据信号进行尽可能大的压缩, 去除冗余信息。 冗余信号包含人耳听觉范围外的音频信号以及被掩蔽掉的音频信号等。...视频编码格式主要是对视频的大小进行压缩,分为帧内压缩和帧间压缩,帧间压缩主要是通过记录关键帧形式来进行压缩

3.6K31

Nginx 静态压缩代码压缩,提高访问速度!

T_T 对于这个问题,咋们今天就从代码压缩 + nginx 静态资源压缩,两个方面进行研究解决!!!...nginx 静态资源动态压缩原理,无非就帮我们将 js、css 等文件,压缩为一个.gz 文件,然后传输给前端浏览器,进行解析。...说到这,咋们不禁会说:那咋们先将 js、css 等文件,生成对应的.gz 文件,不就不需要 nginx 动态压缩了嘛? 好像是这么一回事!!! 天才呀!!!...nginx 静态资源静态压缩js、css 等文件,生成对应的.gz 文件 这个,就可以借助一些依赖进行处理了:compression-webpack-plugin 安装依赖: npm install...compression-webpack-plugin -D 复制代码 vue.config.js const CompressionWebpackPlugin = require('compression-webpack-plugin

1.5K20
领券