uniapp微信小程序之分包异步化之组件分包

最新推荐文章于 2024-09-19 15:22:41 发布
最新推荐文章于 2024-09-19 15:22:41 发布
阅读量2.6k 收藏
点赞数
分类专栏： 小程序 移动端开发 文章标签： uni-app 微信小程序 小程序 分包异步化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jie_rookie/article/details/133745663
版权
本文详细介绍了uni-app微信小程序中组件分包异步化的重要性和解决的问题，包括主包空间不足和访问速度优化。同时，针对开启组件分包异步化过程中遇到的占位组件配置、$refs访问报错和多分包组件互相调用等问题，提出了具体的解决方案，如正确配置componentPlaceholder，延迟$refs访问，以及两种不同的组件互相调用策略。
摘要由CSDN通过智能技术生成

一、组件分包异步化解决的问题

  1. 日渐增加的通用组件造成的主包空间不足；

  2. 提升小程序访问速度，降低白屏率；

二、开启组件分包异步化过程中遇到的问题

  1. 如何进行占位组件配置；

  2. 如何解决通过$refs访问异步组件报错；

  3. 如何判断所有异步组件都已加载完毕；

  4. 多分包组件之间互相调用如何配置；

  • 占位组件配置

        直接在页面路由配置文件pages.json中对应调用异步组件的页面配置style中配置对应的componentPlaceholder，uniapp编译成微信小程序时会将componentPlaceholder同步到页面json配置中。

例如：

  "pages": [
    {
      "path": "pages/index/index",
最低0.47元/天 解锁文章
暗夜星河
关注
专栏目录
uniapp 微信小程序异步调用分包的自定义组件
liuye066的专栏
05-10 905
在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path "subTaixin/measureHeart/moreFun" (using by "pages/index/index")；需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。2.1 在pages/index/index.vue中。上传到体验版上，扫码测试时又正常。
解决uniapp Prop being mutated: "placeholder"报错
ten_yearM的博客
05-06 5681
想要解决的问题：封装一个组件A，组件A的placeholder有默认值，但又有几处需要从父组件传入自定义值，即想要父组件有传值时使用父组件，没有传值使用默认（默认有分情况或者使用语言包，‘default’用不了），本文不解决Prop双向绑定。 报错信息： Avoid mutating a prop directly since the value will be overwritten whene...
一文带你彻底搞定小程序分包和预加载
weixin_47121832的博客
08-09 1889
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
微信小程序-使用 vant-weapp 之后的分包优化
龙衣
11-30 3745
背景 在开发中引入了 vant-weapp 导致项目包过大，真机调试不了，也上传不了，所以只能分包加载了。 实现 首先就是根据官方文档进行分包 但是有可能包体积还是过大，这时候只能进入到vant-weapp库的目录下，删除不必要的组件了。 我们在用npm安装vant-weapp构建后会生成两个文件夹 这两个文件的区别，官网也说明了：原理介绍 node_modules 目录不会参与编译、上传和打包中 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 np
uniapp使用分包异步化后uview2出现object,object的解决办法
最新发布
u011647720的博客
09-19 696
niapp现在已经支持了在subPackages里使用分包异步化，u-input输入时候无法正常显示，出现object,object的问题
uniapp 异步组件
LJJONESEED的博客
08-09 1497
uniapp 异步组件。
uni-app 微信小程序分包
Gewenjuan_0309的博客
05-21 226
1.pages.json 文件中设置分包，配置项:"subPackages"，注意tabbar页面，只能放在主包。"optimization":{"subPages":true}，启用分包。3.manifest.json文件中。2.pages.json文件中。
小程序：使用分包异步化解决一个分包引入另一个分包的组件/函数的问题
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-28 7000
小程序使用分包异步化解决一个分包引入另一个分包的组件/函数的问题
微信小程序分包异步化，分包之间可以互相使用自定义组件
LRQQHM的博客
02-18 914
data() {return {},mounted(){},methods:{
uniapp 小程序封装异步（get/post/delete/put）共用
Ambitiouss的博客
09-18 5528
提出前景： 最开始学编程的时候呢，不知道写了多少重复代码....哈哈 嘲讽一下。后来出来上班了，前端架构师有要求。尽量压缩代码。 写好注释（因为一个人不可能一辈子只待在一个企业，这样的话有助于后来同事接手，和一个平台的稳定性）。这些观点非常 认同。 提出前问题： 以上呢，公司用的是jquery，而小程序和vue也是这段时间学习。对我来说，刚学一种语言就要提出他的公共部分对我是有难 度的（不知道语...
uni-app做微信小程序的分包处理
forever__fish的博客
02-15 4975
我们的都知道微信小程序有随即随用，用完即走的优点，并且它开发门槛低，但是它也有一个致命的缺点，就是代码包体积的限制，这一缺点让小程序的开发有了一定的限制，现在有一方法可以减少代码包的体积，能够让小程序的功能得到一定的扩展，这一方法就是——分包。
微信小程序中的分包的功能
02-08
为了解决这个问题，微信小程序引入了“分包”功能，以优化加载性能，提升用户体验。 分包功能允许开发者将一个小程序的页面逻辑分成多个子包，每个子包可以独立加载，这样用户在首次打开小程序时，只会加载主包内的...
微信小程序 — 异步加载echarts
weixin_42059109的博客
08-06 1003
微信小程序 — 异步加载echarts 引入echarts 基本用法请参考： ​ echarts文档 — 在微信小程序中使用 异步加载 很多时候，我们更多需要的是请求到数据后，更具数据来渲染图标，这个时候就需要使用异步加载(懒加载) wxml <ec-canvas canvas-id="vod" ec="{{ vodec }}" id="vod-dom-bar"></ec-canvas> js ... data:{ vodec: { lazyLoad:
小白学习微信小程序的项目管理和分包加载
wx_linying1029的博客
08-14 415
在 custom-button 文件夹中，创建 custom-button.js、custom-button.wxml 和 custom-button.wxss 文件，分别用于定义组件的逻辑、结构和样式。首先，在项目中创建一个自定义组件的文件夹，例如 components，然后在 components 文件夹中创建一个子文件夹，例如 custom-button。微信小程序支持分包加载，当小程序的代码量过大时，可以将代码拆分成多个分包，分包独立于主包，代码分包之后，可以实现按需加载，提高小程序的运行效率。
微信小程序——自定义组件
qwjy的博客
02-13 2181
  文章目录自定义组件创建自定义组件        自定义组件   开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。     创建自定义组件 ...
uni-app小程序分包
weixin_57605398的博客
06-11 285
uni-app小程序分包 1.在pages同层级下新建文件夹 2.在uniapp.json中声明subpackages字段进行分包操作如下图： { "pages": [ "pages/home/index", "pages/promote/index", "pages/partner/index/index", "pages/my/index", "pages/login/wxmp" ], "subp
UNI-APP 分包使用(详解与实战)
码海扬帆：前端探索之旅的博客
03-02 1982
4、在pages.json中创建"subPackages"数组，数组中包含两个参数：1.root：为子包的根目录，2.pages：子包由哪些页面组成（参数同pages）；js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用。自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息。
uni-app开发日志[2022022701]：解决因异步原因导致子组件调用父组件中uni-form表单验证事件时发生的错误及uniform、promise、async、await的同步异步使用注意点
暂时先用这个名字
02-27 4460
uni-form是uniapp官方组件，其中表单验证部分使用异步方式，这样当子组件调用父组件的验证事件时，该验证事件将排在最后执行从而导致无法获得正确验证结果。解决这个问题需要结合表单验证、同步异步、promise、catch、then、async、await等内容。
uniapp开发小程序的组件库如何在分包中单独引入不占主包体积？
m0_47126632的博客
12-04 1608
uniapp开发小程序的组件库如何在分包中单独引入不占主包体积？
uniapp中echarts在tabbar页怎样分包
06-19
在UniApp中使用ECharts时，为了优化加载速度和提高应用性能，特别是当TabBar页面较多且每个页面都需要使用ECharts时，可以考虑将ECharts分包处理。以下是在 UniApp 中实现 ECharts 分包的步骤： 1. **按需引入**: - 在 TabBar 页面中，根据实际需要引入 ECharts 和相关的图表组件，而不是全局引入。这样只有用到的图表才会在编译时被打包。 ```javascript // 示例代码 import { loadComponent } from '/@ uniapp/framework/runtime/wrapper'; export default { onLoad() { loadComponent({ name: 'eccharts', path: '../components/ECharts.vue', // ECharts 组件的路径 }).then((component) => { this.myChart = component.create(this); }); }, } ``` 2. **使用懒加载**: - 如果ECharts是通过异步组件的方式引入的，可以利用 Vue 的动态导入 (`import()`) 功能实现按需加载。 ```javascript export default { async onLoad() { if (!this.myChart) { const { default: ECharts } = await import('echarts'); // 按需加载 ECharts this.myChart = new ECharts({ // 初始化配置项 }); } }, } ``` 3. **代码分割（Code Splitting）**: - 在uni-app的配置文件`app.json`或`config.js`中，可以设置代码分割策略，将ECharts库和其他大文件单独打包。 ```json // app.json 或 config.js "splitChunks": { "cacheGroups": { "echarts": { test: /[\\/]node_modules[\\/]/, include: ['echarts'], priority: 10, // 设置优先级，让ECharts先加载 chunks: 'all' // 使用所有模式打包 } } } ``` 4. **资源预加载**: - 可以在需要ECharts的页面首次加载前，使用 `preload()` 方法预加载资源，加快实际加载速度。 ```javascript // 示例 import('echarts').then(() => { // 在这里可以预加载ECharts资源 }); // 或者在生命周期钩子 onReady 中做预加载 onReady() { window.preloadEChartsResources(); } async function preloadEChartsResources() { // 预加载ECharts相关资源 } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值