c++代码大全_Javascript 代码是如何被压缩的
(给前端大全加星标,提升前端技能)
作者:全栈成长之路 公号 / 山月行
随着前端的发展,特别是 React
,Vue
等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。此时的前端的静态资源也越来越庞大,而毫无疑问 javascript
资源已是前端的主体资源,对于压缩它的体积至为重要。
为什么说更小的体积很重要呢:更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验,这也能早就企业更大的利润。另外,更小的体积对于服务器来说也意味更小的带宽以及更少的服务器费用。
前端构建编译代码时,可以使用 webpack
中的 optimization.minimizer
来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的,这样当在生产环境的控制台调试代码时对它也有更深刻的理解。
如何查看资源的体积
对于我们所编写的代码,它在操作系统中是一个文件,根据文件系统中的 stat
信息我们可以查看该文件的大小。
stat
命令用来打印文件系统的信息:
$ stat config.js File: ‘config.js’ Size: 3663 Blocks: 8 IO Block: 4096 regular fileDevice: fd01h/64769d Inode: 806060 Links: 1Access: (0644/-rw-r--r--) Uid: ( 0/ root) Gid: ( 0/ root)Access: 2020-02-13 13:43:54.851381702 +0800Modify: 2020-02-13 13:43:52.668417641 +0800Change: 2020-02-13 13:43:52.691417262 +0800 Birth: -
stat
打印的信息过大,如果只用来衡量体积,可以使用 wc -c
$ wc -c config.js3663 config.js
如何压缩代码体积?
去除多余字符: 空格,换行及注释
// 对两个数求和function sum (a, b) {return a + b;}
先把一个抽象的问题给具体化,如果是以上一段代码,那如何压缩它的体积呢:
此时文件大小是 62 Byte
, 一般来说中文会占用更大的空间。
多余的空白字符会占用大量的体积,如空格,换行符,另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后,代码体积会得到减少。
去掉多余字符之后,文件大小已经变为 30 Byte
。 压缩后代码如下:
function sum(a,b){return a+b}
替换掉多余字符后会有什么问题产生呢?
有,比如多行代码压缩到一行时要注意行尾分号。 这就需要通过以下介绍的 AST 来解决。
压缩变量名:变量名,函数名及属性名
function sum (first, second) {return first + second;}
如以上 first
与 second
在函数的作用域中,在作用域外不会引用它,此时可以让它们的变量名称更短。但是如果这是一个 module
中,sum
这个函数也不会被导出呢?那可以把这个函数名也缩短。
// 压缩: 缩短变量名function sum (x, y) {return x + y;}
// 再压缩: 去除空余字符function s(x,y){return a+b}
在这个示例中,当完成代码压缩 (compress
) 时,代码的混淆 (mangle
) 也捎带完成。但此时缩短变量的命名也需要 AST 支持,不至于在作用域中造成命名冲突。
更简单的表达:合并声明以及布尔值简化
合并声明的示例如下:
// 压缩前const a = 3;const b = 4;
// 压缩后const a = 3, b = 4;
布尔值简化的示例如下:
// 压缩前!b && !c && !d && !e
// 压缩后b||c||d||e
这个示例更是需要解析 AST 了
AST
AST
,抽象语法树,js 代码解析后的最小词法单元,而这个过程就是通过 Parser 来完成的。
那么 AST 可以做什么呢?
- eslint: 校验你的代码风格
- babel: 编译代码到 ES 低版本
- taro/mpvue: 各种可以多端运行的小程序框架
- GraphQL: 解析客户端查询
我们在日常工作中经常会不经意间与它打交道,如 eslint
与 babel
,都会涉及到 js
与代码中游走。不同的解析器会生成不同的 AST,司空见惯的是 babel 使用的解析器 babylon
,而 uglify
在代码压缩中使用到的解析器是 UglifyJS
。
你可以在 AST Explorer[3] 中直观感受到,如下图:
那压缩代码的过程:code -> AST -> (transform)一颗更小的 AST -> code,这与 babel
和 eslint
的流程一模一样。
UglifyJS
不要重复造轮子!
于是我找了一个久负盛名的关于代码压缩的库: UglifyJS3[4],一个用以代码压缩混淆的库。那它是如何完成一些压缩功能的,比如替换空白符,答案是 AST。
webpack
中内置的代码压缩插件就是使用了它,它的工作流程大致如下:
// 原始代码const code = `const a = 3;`
// 通过 UglifyJS 把代码解析为 ASTconst ast = UglifyJS.parse(code);ast.figure_out_scope();
// 转化为一颗更小的 AST 树compressor = UglifyJS.Compressor();ast = ast.transform(compressor);
// 再把 AST 转化为代码code = ast.print_to_string();
而当你真正使用它来压缩代码时,你只需要面向配置编程即可,文档参考 uglify 官方文档[5]
{ {ecma: 8, },compress: {ecma: 5,warnings: false,comparisons: false,inline: 2, },output: {ecma: 5,comments: false,ascii_only: true, }}
在 webpack 中压缩代码
在知道代码压缩是怎么完成的之后,我们终于可以把它搬到生产环境中去压缩代码。终于到了实践的时候了,虽然它只是简单的调用 API 并且调调参数。
一切与性能优化相关的都可以在 optimization
中找到,TerserPlugin
是一个底层基于 uglifyjs
的用来压缩 JS 的插件。
optimization: {minimize: isEnvProduction,minimizer: [new TerserPlugin({terserOptions: {parse: {ecma: 8, },compress: {ecma: 5,warnings: false,comparisons: false,inline: 2, },output: {ecma: 5,comments: false,ascii_only: true, }, },sourceMap: true }) ]}
推荐阅读 点击标题可跳转
前端如何在繁忙的业务中提升自己
当浏览器全面禁用三方 Cookie
在生产环境中使你的 npm i 速度提升 50%
觉得本文对你有帮助?请分享给更多人
关注「前端大全」加星标,提升前端技能
好文章,我在看❤️
c++代码大全_Javascript 代码是如何被压缩的相关推荐
- 手机版天气预报代码html代码大全,天气预报代码大全(The weather code).doc
天气预报代码大全(The weather code) 天气预报代码大全(The weather code) Domestic: City country code Beijing, China, CH ...
- python优雅代码大全_代码这样写更优雅(Python版)
Python 这门语言最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.但有时候我们写代码,特别是 Python 初学者,往往还是按照其它语言的思维习惯来写,那样的写法不仅运行 ...
- ios代码大全】代码例子区全区搜索索引
/************************ ************************ IOS 类代码 ************************/ 我自己做的翻书效果,小猫 ...
- html中的城市代码大全,html代码大全
进入网页时弹出的信息对话框 body 关闭窗口后弹出对话框 body 告别提示 =("再见,感谢你的访问!") 只要你肯干,没有什么不能成功的. 1.忽视右键 ="&qu ...
- python画心形代码大全_Python代码合集看点 机器人算法、自动导航算法算法大全...
导读:本文包含机器人算法.自动导航算法的Python代码合集.其主要特点有以下三点:选择了在实践中广泛应用的算法:依赖最少.容易阅读,容易理解每个算法的基本思想.希望阅读本文后能对你有所帮助.文章来源 ...
- 游戏脚本代码大全_代码与程序的关系是这样的
很多人都明白代码的意思,但真正的含义还不是太理解,那么专业的代码解释是什么呢?其实它就是服务器所解析的语言,也就是说服务器将代码翻译成源代码. 代码也可以看成是程序的片段,代码可能只有一行,也有可能有 ...
- 【很强大的ios代码大全】代码例子区全区搜索索引
************************ IOS 类代码 ************************/ 我自己做的翻书效果,小猫咪再次登场「2011/03/02」 如何实现QQLi ...
- c语言求婚代码大全,继“代码求救”后,程序员用40行代码求婚成功!
原标题:继"代码求救"后,程序员用40行代码求婚成功! 前段时间,程序员又火了一把. 一名程序员掉入传销组织用代码向同事求救,同事秒懂,程序员被成功救出.大家都为程序员的机智点赞, ...
- python基础代码事例-python基础代码大全
[实例简介] python代码大全,适用于基础python学习者,里面的代码基本上是基础学习者必经过程. Python学习入门很快,但学习之路任重道远 [实例截图] [核心代码] python代码大全 ...
- c语言代码大全_从学生到专家,C语言开发必读的8本书
本号总结了在C语言实际开发中必读的8本书,当然这8本书并不能囊括开发的方方面面,但就作者亲身体验来看,这8本书确实每个C语言开发者都必须要读的书,并且是应该深入精读的书. C程序设计语言 相信大家都学 ...
最新文章
- commons-collections使用介绍之Bag HashBag
- 如何查看某个ABAP user针对某个authorization object的assignment status
- cf1555B. Two Tables
- 水面反光如何拍摄_拍摄水面反射的创意
- 【clickhouse】clickhouse 原生监控
- macmini作为远程服务器,如何使用Macbook Pro远程免密码登录Mac mini
- mysql远程连接打不开_MySql远程连接无法打开解决办法
- [转]asp.net中打印ReportViewer报表
- 使用 Cobbler 自动化和管理系统安装
- DBC 2000 安装
- Java前后端分离项目跨域问题
- LED发光原理(笔记)
- 根据输入的姓氏,随机获取对应的男生和女生姓名
- linux c语言修改文件权限,C语言再学习 -- 修改linux文件权限
- 网页抓取表格_使用Google表格进行网页抓取
- b站服务器故障修复,“B站崩了”官方回应:服务器机房故障!现已恢复!
- 2021 Python入门资料汇总
- 制作ubuntu18.04启动盘 + 安装ubuntu18.04
- 【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
- 《启示录:打造用户喜爱的产品》第一部分 人员6 招聘产品经理
热门文章
- Why hash maps in Java 8 use binary tree instead of linked list?
- MySQL空间索引简单使用
- Linux基础笔记——RAID
- SQL Server 2016 SP1 标准版等同企业版?!
- 使用apidoc 生成Restful web Api文档——新手问题与解决方法
- poj_3468 线段树
- HTML5线性图表 图表数据区域可着色
- java之模块学习-JAVA的IO流
- Cannot use v-for on stateful component root element because it renders multiple elements.
- php关联数组和哈希表,12、哈希表(关联数组) - RGSS 入门教程