背景

Recently a new took over a small program,With this small program made some optimization practice,Recorded some operation details and share with you the pit.

一、性能优化

1. 代码质量扫描

WeChat developer tools in stable version1.06.2201210After the new panel code quality analysis,可以参考《小程序性能优化指南》进行调优.

This tool was first introduced problems more,The official also in optimizing the,Analysis of the results of the personal feel are for reference only.

Take a look at this small program analysis results:

There are two failed,分别来看一下：

1）Is not enabled component on-demand introduce
This may, according to official hints,“在 app.json 中加入 "lazyCodeLoading": "requiredComponents" Open the small program component按需注入特性”.

But it must be confirmed after the modification of configuration of small programs appear normal.After I had tried to open this feature led to bad,Kiss the attribute measurement more cautious open pit.

工具的版本更新日志There are many times to repair this feature：

• F 修复 开启 lazyCodeLoading Hang on the tool problem 反馈详情
• F 修复 lazycodeloading 样式污染问题
• F 修复 lazyCodeLoading 报错 expect FLOW_APPLY_PROPERTY but get another
  如果开启lazyCodeLoadingAfter the above problems,Can try to upgrade kits,If you still encounter other strange questions suggest that temporarily shut down this feature to carry officialbug.

2）Should not be present without relying on file
You can see most is introducedvantComponent library file,因为vantComponent does not support part introduce,All the useless to the component will be displayed here,But upload code package will filter out this part of the document on the,So these will not affect the actual upload code package size.

In the project file without relying on existing in the actual code can search to filter out,Verify that the code actually not used,可以进行删除,Reducing the volume and optimize the loading speed.

注：If the situation of the filtering error,可以在 project.config.json 的 setting 字段中添加 ignoreDevUnusedFiles 为 false,也可以在 packOptions 的 include Field in the manual will be ignored file to introduce.

2. 代码依赖分析

According to the analysis tools can see,Code volume have1.36M,This small program little number of pages,There should not be such a big size.

全局搜索miniprogram-sm-crypto,发现这个npmPackage and not used,Is only an official sample,可以去掉.

vantLibrary is useful to,But look closely atnpm包里,vant-weappThe library is repeated3次.

查看代码发现,packages.jsonConfigured by two versions,

"dependencies": {
    
    "@vant/weapp": "^1.9.2",
    "miniprogram-sm-crypto": "^0.2.1",
    "vant-weapp": "^0.5.16"
  },

且在project.config.jsonIn the package path configured with a package directory,Lead to the path./miniprogramThe packaging it again,

"packNpmRelationList": [
      {
    
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

而app.jsReference to the component only actually a path,And it is an old version：

"usingComponents": {
    
        "van-button": "miniprogram/vant-weapp/button/index",
        "van-calendar": "miniprogram/vant-weapp/calendar/index",
        "van-popup": "miniprogram/vant-weapp/popup/index",
        "van-picker": "miniprogram/vant-weapp/picker/index",
        "van-toast": "miniprogram/vant-weapp/toast/index",
        "van-dialog": "miniprogram/vant-weapp/dialog/index",
        "van-icon": "miniprogram/vant-weapp/icon/index",
        "van-search": "miniprogram/vant-weapp/search/index",
        "van-tab": "miniprogram/vant-weapp/tab/index",
        "van-tabs": "miniprogram/vant-weapp/tabs/index"
    },

在vant的官方文档中可以看到：

So do the optimization operation：

• 去掉packages.jsonRepeat to introducevant包,并升级到最新版本

 "dependencies": {
    
    "@vant/weapp": "^1.10.4"
  }

• 配置miniprogramNpmDistDir配置为’./’

"packNpmRelationList": [
      {
    
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ],

• 删除node_modules和miniprogram_npm目录,重新跑npm i, 工具构建npm
• Configure the reference path of components for the new packaging/miniprogram_npm/@vant/weapp/xxx

Testing code depends on the file again,You can see the code volume reduced a lot,npmThe volume of the package from1.05M减少到了407k

3. White page optimization

Finds a page development hang time special long,Visible to the naked eye for more than5sThe hang of,Caught found this page while large amount of data,Can interface returned not slow,Not lead to bad for so long.

After screening found the page introducesvan-calendar组件的问题,查阅vantThe official document also mention：

“Calendar The calendar component bymin-date和max-date定义日历的范围,需要注意的是min-date和max-date的区间不宜过大,否则会造成严重的性能问题.”

Found the component is not setmax-date,Then according to the product demand,The actual query time range in the current time of about three months can forward,According to the demand to reduce the time range after setting can clearly see hang time.

二、交互优化

1. 兼容iphone底部安全区域

When operating area is at the bottom of the page,部分iphoneMobile phone at the bottom of the article will be covering operating area

If you need compatible with such models,And shall not affect the other without safety area at the bottom of the machine,可以用以下css就可以解决：

/* 可以通过增加padding-bottom来适配 */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

注意：需同时设置env和constant代码,同样env()和constant()需要同时存在,而且顺序不能换.因为在IOS11.2系统以前,可以使用constant()函数,但是在IOS11.2系统以后,This function has been abandoned,被env()函数替代了.

2. Select box increase search

Originally select shop to usepicker组件,Can interface returned can option has several hundred,This slide to it is difficult to find a want to choose the item at all,Business forward hopes for search.

WeChat native components andvantComponents provided with the choice of the search component,于是用vant-search和picker-viewAssemble a component,Can realize the function with the choice of search,Can be found by searching for a narrow range rapid want options.