使用optimize-js优化JS函数

╰半橙微兮° 2022-10-18 12:53 182阅读 0赞

函数的解析方式

*  lazy parsing 懒解析
 *  eager parsing 饥饿解析

函数在初始化时，都会先进行一次`lazy parsing`，但是有的函数因为要立即执行，这时又会进行一次`eager parsing`，这样就导致我们同一个函数被重复解析，降低了整体效率，下面就看一下如何利用Optimize.js优化初次加载时间

例如我们有这么一段代码

1 export default () => { 
    2     const add = (a, b) => a*b;
    3     const num1 = 1;
    4     const num2 = 2;
    5     add(num1, num2);
    6 }

当代码走到第2行时，读到了`add()`函数，此时会进行一次`lazy parsing`，然后走到第5行，在实际调用时又会进行一次`eager parsing`，我们要优化这一块的代码其实很简单，第2行加一个括号就可以

1 export default () => { 
    2     const add = ((a, b) => a*b);
    3     const num1 = 1;
    4     const num2 = 2;
    5     add(num1, num2);
    6 }

这样代码在走到第2行时就会直接进行`eager parsing`  
但在实际项目中，js在压缩时会自动去掉这对括号，这样就导致我们无法将想做的事情通知给解析器，这个时候我们就要用到[Optimize.js][]了，它的首页已经给了我们使用案例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]  
我们直接使用`Optimize.js`它会帮我将去掉的括号再加回来！

[Optimize.js]: https://www.npmjs.com/package/optimize-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x0MzI2MDMwNDM0_size_16_color_FFFFFF_t_70]: /images/20221005/6b900ff376844183ba5401552c64cb89.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Matlab 优化非线性函数

使用 Matlab 优化非线性函数在实际问题中，我们经常需要最小化或最大化一个非线性函数。Matlab 提供了一些优化工具箱来解决这类问题，其中最常用的是 Optimiza

怼烎@/ 2024年03月23日 20:29/ 0 赞/ 94 阅读

相关 js前端性能优化之函数节流和函数防抖

　　前言：针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能　　节流：　　节流：使得

朱雀/ 2023年09月25日 12:10/ 0 赞/ 116 阅读

相关深度学习优化函数优化函数

![1598479-20190918171750841-25124104.png][] 转载于:https://www.cnblogs.com/yunshangyue7

约定不等于承诺〃/ 2023年08月17日 16:07/ 0 赞/ 140 阅读

相关使用optimize-js优化JS函数

函数的解析方式 lazy parsing 懒解析 eager parsing 饥饿解析函数在初始化时，都会先进行一次`lazy parsing`，但是有的函数

╰半橙微兮°/ 2022年10月18日 12:53/ 0 赞/ 183 阅读

相关使用Glup.JS优化JS、CSS、图片，压缩合并

说在开头前几天生病没去上班，在家里玩了一下Glup Gulp.js 是一个自动化构建工具，你可以用它在项目中自动执行常见任务，如：压缩优化JS、压缩CSS、压缩

╰半夏微凉°/ 2022年10月02日 10:58/ 0 赞/ 250 阅读

相关 js中函数的匿名函数的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(run

叁歲伎倆/ 2022年09月10日 05:25/ 0 赞/ 184 阅读

相关 js function定义函数使用心得

js function定义函数使用心得，了解这个才能更进一步的了解js面向对象方面的知识。 1.最基本的作为一个本本分分的函数声明使用。 function func

￡神魔★判官ぃ/ 2022年06月17日 07:50/ 0 赞/ 311 阅读

相关 JS sort()函数使用总结

srot()如果不带参数，是将按字母顺序对数组中的元素进行排序，也就是是按照字符编码的顺序进行排序。 var arr1 = ['a', 'd', 'c', 'b'];

刺骨的言语ヽ痛彻心扉/ 2022年05月25日 10:40/ 0 赞/ 211 阅读

相关 JS anonymous：无名函数的使用

这个无名函数名字是我起的，起这个名字的原因有两条。原因一是在改前端代码的时候发现这个东西，在调试台console用debug调试，会显示一个anonymous，但你发现他是一个

- 日理万妓/ 2022年04月23日 22:10/ 0 赞/ 143 阅读

相关 js回调函数的使用

在第一次学js的时候，估计很多人对回调函数很蒙，今天有空梳理总结下回调函数，算是一次学习，算是一次总结，也算是一次分享。文章目录回调函数执行流程

柔情只为你懂/ 2021年09月21日 10:34/ 0 赞/ 502 阅读