首页 >> js开发 >> js代码javascript 代码是如何被压缩的示例代码
js代码javascript 代码是如何被压缩的示例代码
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
随着前端的发展，特别是 React ， Vue 等构造单页应用的兴起，前端的能力得以很大提升，随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大，而毫无疑问 javascript 资源已是前端的主体资源，对于压缩它的体积至为重要。ReactVuejavascript为什么说更小的体积很重要呢：更小的体积对于用户体验来说意味着更快的加载速度以及更好的用户体验，这也能早就企业更大的利润。另外，更小的体积对于服务器来说也意味更小的带宽以及更少的服务器费用。前端构建编译代码时，可以使用 webpack 中的 optimization.minimizer 来对代码进行压缩优化。但是我们也需要了解如何它是压缩代码的，这样当在生产环境的控制台调试代码时对它也有更深刻的理解。webpackoptimization.minimizer如何查看资源的体积如何查看资源的体积如何查看资源的体积对于我们所编写的代码，它在操作系统中是一个文件，根据文件系统中的 stat 信息我们可以查看该文件的大小。statstat 命令用来打印文件系统的信息：stat
$ stat config.js
File: ‘config.js'
Size: 3663
Blocks: 8
IO Block: 4096
regular file
Device: fd01h/64769d
Inode: 806060
Links: 1
Access: (0644/-rw-r--r--) Uid: (
0/
root)
Gid: (
0/
root)
Access: 2021-02-13 13:43:54.851381702 +0800
Modify: 2021-02-13 13:43:52.668417641 +0800
Change: 2021-02-13 13:43:52.691417262 +0800
Birth: -
$ stat config.js
File: ‘config.js'
Size: 3663
Blocks: 8
IO Block: 4096
regular file
Device: fd01h/64769d
Inode: 806060
Links: 1
Access: (0644/-rw-r--r--) Uid: (
0/
root)
Gid: (
0/
root)
Access: 2021-02-13 13:43:54.851381702 +0800
Modify: 2021-02-13 13:43:52.668417641 +0800
Change: 2021-02-13 13:43:52.691417262 +0800
Birth: -stat 打印的信息过大，如果只用来衡量体积，可以使用 wc -c
$ wc -c config.js
3663 config.js
$ wc -c config.js
3663 config.js如何压缩代码体积？ 如何压缩代码体积？ 如何压缩代码体积？ 去除多余字符: 空格，换行及注释
// 对两个数求和
function sum (a, b) {
return a + b;
}
// 对两个数求和
function sum (a, b) {
return a + b;
}先把一个抽象的问题给具体化，如果是以上一段代码，那如何压缩它的体积呢:此时文件大小是 62 Byte ， 一般来说中文会占用更大的空间。一般来说中文会占用更大的空间。多余的空白字符会占用大量的体积，如空格，换行符，另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后，代码体积会得到减少。去掉多余字符之后，文件大小已经变为 30 Byte 。 压缩后代码如下:
function sum(a,b){return a+b}
function sum(a,b){return a+b}替换掉多余字符后会有什么问题产生呢？有，比如多行代码压缩到一行时要注意行尾分号。这就需要通过以下介绍的 AST 来解决。压缩变量名：变量名，函数名及属性名
function sum (first, second) {
return first + second;
}
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}
// 压缩: 缩短变量名
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;
// 压缩前
const a = 3;
const b = 4;
// 压缩后
const a = 3, b = 4;布尔值简化的示例如下：
// 压缩前
!b && !c && !d && !e
// 压缩后
b||c||d||e
// 压缩前
!b && !c && !d && !e
// 压缩后
b||c||d||e这个示例更是需要解析 AST 了ASTAST ，抽象语法树，js 代码解析后的最小词法单元，而这个过程就是通过 Parser 来完成的。那么 AST 可以做什么呢？
eslint: 校验你的代码风格
babel: 编译代码到 ES 低版本
taro/mpvue: 各种可以多端运行的小程序框架
GraphQL: 解析客户端查询
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 把代码解析为 AST
const ast = UglifyJS.parse(code);
ast.figure_out_scope();
// 转化为一颗更小的 AST 树
compressor = UglifyJS.Compressor();
ast = ast.transform(compressor);
// 再把 AST 转化为代码
code = ast.print_to_string();
// 原始代码
const code = `const a = 3;`
// 通过 UglifyJS 把代码解析为 AST
const 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,
}
}
{
{
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
inline: 2,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
}
}在 webpack 中压缩代码在 webpack 中压缩代码在 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
})
]
}
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
})
]
}参考资料 [1]shfshanyue/blog: https://github.com/shfshanyue/blog https://github.com/shfshanyue/blog https://github.com/shfshanyue/blog[2]前端工程化系列: https://github.com/shfshanyue/blog/tree/master/frontend-engineering https://github.com/shfshanyue/blog/tree/master/frontend-engineering https://github.com/shfshanyue/blog/tree/master/frontend-engineering[3]AST Explorer: https://astexplorer.net/ https://astexplorer.net/ https://astexplorer.net/[4]UglifyJS3: https://github.com/mishoo/UglifyJS2 https://github.com/mishoo/UglifyJS2 https://github.com/mishoo/UglifyJS2[5]uglify 官方文档: https://github.com/mishoo/UglifyJS2#parse-options https://github.com/mishoo/UglifyJS2#parse-options https://github.com/mishoo/UglifyJS2#parse-options
$ stat config.js
File: ‘config.js'
Size: 3663
Blocks: 8
IO Block: 4096
regular file
Device: fd01h/64769d
Inode: 806060
Links: 1
Access: (0644/-rw-r--r--) Uid: (
0/
root)
Gid: (
0/
root)
Access: 2021-02-13 13:43:54.851381702 +0800
Modify: 2021-02-13 13:43:52.668417641 +0800
Change: 2021-02-13 13:43:52.691417262 +0800
Birth: -
$ stat config.js
File: ‘config.js'
Size: 3663
Blocks: 8
IO Block: 4096
regular file
Device: fd01h/64769d
Inode: 806060
Links: 1
Access: (0644/-rw-r--r--) Uid: (
0/
root)
Gid: (
0/
root)
Access: 2021-02-13 13:43:54.851381702 +0800
Modify: 2021-02-13 13:43:52.668417641 +0800
Change: 2021-02-13 13:43:52.691417262 +0800
Birth: -stat 打印的信息过大，如果只用来衡量体积，可以使用 wc -c
$ wc -c config.js
3663 config.js
$ wc -c config.js
3663 config.js如何压缩代码体积？ 如何压缩代码体积？ 如何压缩代码体积？ 去除多余字符: 空格，换行及注释
// 对两个数求和
function sum (a, b) {
return a + b;
}
// 对两个数求和
function sum (a, b) {
return a + b;
}先把一个抽象的问题给具体化，如果是以上一段代码，那如何压缩它的体积呢:此时文件大小是 62 Byte ， 一般来说中文会占用更大的空间。一般来说中文会占用更大的空间。多余的空白字符会占用大量的体积，如空格，换行符，另外注释也会占用文件体积。当我们把所有的空白符合注释都去掉之后，代码体积会得到减少。去掉多余字符之后，文件大小已经变为 30 Byte 。 压缩后代码如下:
function sum(a,b){return a+b}
function sum(a,b){return a+b}替换掉多余字符后会有什么问题产生呢？有，比如多行代码压缩到一行时要注意行尾分号。这就需要通过以下介绍的 AST 来解决。压缩变量名：变量名，函数名及属性名
function sum (first, second) {
return first + second;
}
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}
// 压缩: 缩短变量名
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;
// 压缩前
const a = 3;
const b = 4;
// 压缩后
const a = 3, b = 4;布尔值简化的示例如下：
// 压缩前
!b && !c && !d && !e
// 压缩后
b||c||d||e
// 压缩前
!b && !c && !d && !e
// 压缩后
b||c||d||e这个示例更是需要解析 AST 了ASTAST ，抽象语法树，js 代码解析后的最小词法单元，而这个过程就是通过 Parser 来完成的。那么 AST 可以做什么呢？
eslint: 校验你的代码风格
babel: 编译代码到 ES 低版本
taro/mpvue: 各种可以多端运行的小程序框架
GraphQL: 解析客户端查询
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 把代码解析为 AST
const ast = UglifyJS.parse(code);
ast.figure_out_scope();
// 转化为一颗更小的 AST 树
compressor = UglifyJS.Compressor();
ast = ast.transform(compressor);
// 再把 AST 转化为代码
code = ast.print_to_string();
// 原始代码
const code = `const a = 3;`
// 通过 UglifyJS 把代码解析为 AST
const 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,
}
}
{
{
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
inline: 2,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
}
}在 webpack 中压缩代码在 webpack 中压缩代码在 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
})
]
}
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
})
]
}参考资料 [1]shfshanyue/blog: https://github.com/shfshanyue/blog https://github.com/shfshanyue/blog https://github.com/shfshanyue/blog[2]前端工程化系列: https://github.com/shfshanyue/blog/tree/master/frontend-engineering https://github.com/shfshanyue/blog/tree/master/frontend-engineering https://github.com/shfshanyue/blog/tree/master/frontend-engineering[3]AST Explorer: https://astexplorer.net/ https://astexplorer.net/ https://astexplorer.net/[4]UglifyJS3: https://github.com/mishoo/UglifyJS2 https://github.com/mishoo/UglifyJS2 https://github.com/mishoo/UglifyJS2[5]uglify 官方文档: https://github.com/mishoo/UglifyJS2#parse-options https://github.com/mishoo/UglifyJS2#parse-options https://github.com/mishoo/UglifyJS2#parse-options
相关文章:
- jsvue项目使用$router.go(-1)返回时刷新原来的界面操作js大全
- jsvuex中store存储store.commit和store.dispatch的用法js大全
- jsvue+axios全局添加请求头和参数操作js大全
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js使用React-Router实现前端路由鉴权的示例代码js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
- jsJS可断点续传文件上传实现代码解析js大全
- jsElement Input输入框的使用方法js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
