uniapp 微信小程序包体积/性能优化

2024-08-08  本文已影响0人  遛_遛

1、manifest.json添加optomization、lazyCodeLoading配置
a. optomization-不开启的情况下子包的组件和js文件会被打包到主包的vendor.js文件中,导致主包的vendor.js文件过大


image.png

b.lazyCodeLoading 启用组建按需注入

 "mp-weixin" : {
      "appid" : "",
        "usingComponents" : true,
        "setting" : {
            "urlCheck" : false,
            "minified" : true
        },
        "lazyCodeLoading": "requiredComponents", //微信小程序官方的配置
        // uniapp特有配置
        "optimization" : {
            "subPackages" : true
        }
},

2、图片、视频、音频等资源等使用网络路径
3、分包 详见微信官方文档
4、压缩设置

image.png

cli创建的项目可以在package.json中添加参数--minimize,示例:

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

详见微信官方文档
5、分包预下载 详见微信官方文档
6、渲染线程空闲时进行预加载 在 page.json添加

"window": {
    "handleWebviewPreload": "auto"
  }

详见官方文档
7、减少页面层级,减少页面的嵌套

上一篇 下一篇

猜你喜欢

热点阅读