s***@163.com
s***@163.com
  • 发布:2021-11-04 04:43
  • 更新:2023-04-01 17:51
  • 阅读:620

【报Bug】nvue中@click事件名称越长,编译越慢

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: Mojave 10.14.6

HBuilderX类型: 正式

HBuilderX版本号: 3.2.12

手机系统: Android

手机系统版本号: Android 10

手机厂商: 一加

手机机型: 一加5t

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

比如,这个编译很快

<template>  
  <view>  
    <view @click="a1">a1</view>  
    <view @click="a2">a2</view>  
    <view @click="a3">a3</view>  
    <view @click="a4">a4</view>  
    <view @click="a5">a5</view>  
    <view @click="a6">a6</view>  
    <view @click="a7">a7</view>  
    <view @click="a8">a8</view>  
    <view @click="a9">a9</view>  
    <view @click="a10">a10</view>  
    <view @click="a11">a11</view>  
    <view @click="a12">a12</view>  
    <view @click="a13">a13</view>  
    <view @click="a14">a14</view>  
    <view @click="a15">a15</view>  
    <view @click="a16">a16</view>  
    <view @click="a17">a17</view>  
    <view @click="a18">a18</view>  
    <view @click="a19">a19</view>  
    <view @click="a20">a20</view>  
  </view>  
</template>

这个就能让编译直接卡住,一直卡在:正在热重载...

<template>  
  <view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a1">a1</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a2">a2</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a3">a3</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a4">a4</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a5">a5</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a6">a6</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a7">a7</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a8">a8</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a9">a9</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a10">a10</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a11">a11</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a12">a12</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a13">a13</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a14">a14</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a15">a15</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a16">a16</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a17">a17</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a18">a18</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a19">a19</view>  
    <view @click="wf_ef_efwef_f_eyt_iji_mreg_e_fwfwferg5hytrhrtyhu56jt_a20">a20</view>  
  </view>  
</template>  

操作步骤:
  1. pages下新建一个页面
  2. 写20个view,每个都有@click事件
  3. 事件名弄长一点

预期结果:

事件名长短不影响编译速度

实际结果:

名称越长,编译越慢

bug描述:

nvue页面,方法名越长,编译越慢,甚至直接卡死不再编译

2021-11-04 04:43 负责人:无 分享
已邀请:
s***@163.com

s***@163.com (作者)

目前测试,当事件名大于24个字符的时候,开始变慢,然后以指数级变慢,到达30个字符的时候,已经等到生无可恋。

雷峰

雷峰

不用这么长的函数名不就行了

  • s***@163.com (作者)

    方法名都写成a1,a2,a3,你看得懂吗

    2021-11-04 09:52

  • s***@163.com (作者)

    业务代码,需要用比较清晰的名称来表达业务含义的

    2021-11-04 09:53

  • 雷峰

    回复 s***@163.com: 注释+英文缩写不可以吗,难不成翻译成全称然后往上加。而且你说的情况应该是一个页面有很多方法名,才有冲突的可能,业务多了难道不解耦吗?当然你也可以等官方解决这个问题,我没试过但是像你说的这样那肯定也是bug,只不过不是致命性的。

    2021-11-04 17:28

  • s***@163.com (作者)

    回复 雷峰: 目前整个项目都改成20个字符内的名称,编译速度提升很大,热重载降到秒级。之前也有页面编译慢,只是没发现原因,以为页面大了自然就慢,感觉就浪费了我不少时间。这么多开发者,浪费的时间是很可观的,而官方可能只要花很少的代价就能避免这种浪费

    2021-11-05 12:49

  • 3***@qq.com

    回复 s***@163.com: 我这好几年了 编译一次代码要等好几分钟............. 难道是这问题?

    2021-12-29 16:28

3***@qq.com

3***@qq.com

顶..................

s***@dingtalk.com

s***@dingtalk.com - 盛年不重来,一日难再晨。

为啥我的事件名字符不长,差量编译却依然需要6分钟。。。

犭申

犭申 - 请联系QQ1476779

顶!!!!今天被折磨一天了,最后发现原来是@click 事件名称长度的问题,巨坑啊!!!!希望官方处理一下

犭申

犭申 - 请联系QQ1476779

发现解决方法了,在@click里加上匿名函数“()=>{}”就可以避免编译时间过长的问题,例如:

<view  
  class="item"  
  @click="()=>{  
    $refs.loginTips.checkLoginUigo({  
      path: '/pagesA/shop/orderList',  
      data: {  
        index: 2,  
      },  
    })  
  }"  
></view>
tuonioooo

tuonioooo

补充一下,在NVUE页面中,所有方法命名的长度,如果字符超过30,我这边测试的是32 ,HBuilderX的编译速度会翻倍递增,我这边测试时在 4分钟左右,如果长度小于30 速度正常可以接受

有时间大家可以测试一下,我这边是在测试向子组件传递事件时发现的,大家有时间可以测试一下 。

我提供了一个demo,测试截图如下:

要回复问题请先登录注册