分包分包分包！！！！！

直接略过网上一下简单操作如勾选运行时是否压缩代码，感觉并没有什么用！

众所周知，h5上运行正常的代码，犹豫兼容的原因，在编译为小程序后会出现种种问题。解决报错问题请转到链接【bug】HbuilderX运行到微信小程序报错_ys_healone的博客-CSDN博客

解决完报错能运行后，又出现一个问题就是警告：vendor.js文件过大。

vendor.js是将各种vue依赖编译在一起的一个js文件，我的有1.7M，对于小程序2M上限来说这个问题是致命的。看了很多文章，总结一下解决方案

解决方案一：分包

分包太重要了，而且也不难，看一下文档就会，总结一下就是：在pages同级建新的分包目录，在pages.json中声明分包路径，页面中针对修改一下分包中的页面跳转路径就可以了。

假设支持分包的 uni-app 目录结构如下：

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─pagesA
│  ├─static
│  └─list
│     └─list.vue
├─pagesB
│  ├─static
│  └─detail
│     └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

则需要在 pages.json 中填写

{"pages": [{"path": "pages/index/index","style": { ...}}, {"path": "pages/login/login","style": { ...}}],"subPackages": [{"root": "pagesA","pages": [{"path": "list/list","style": { ...}}]}, {"root": "pagesB","pages": [{"path": "detail/detail","style": { ...}}]}],}

pages为主包，subPackages下的每个root是一个分包

因为初次打开一个分包，需要加载分包中的文件会让初次打开分包页面过慢，可以做一下分包预加载，在pages同级增加如下代码

"preloadRule": {"pagesA/list/list": {"network": "all","packages": ["__APP__"]},"pagesB/detail/detail": {"network": "all","packages": ["pagesA"]}}

分包与分包预加载详细请移步文档uni-app官网

解决方案二：压缩vendor.js文件

推荐使用gulp压缩，暂无经验

总结

因为vendor.js虽然大，但是依赖属于按需加载，主包中引用得少，做了分包后我的项目就没问题了也就没有针对vendor.js进行压缩，暂时没有这方面经验。分包没有解决问题的建议百度搜索其他网友的方案

解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题相关推荐

HBuildx项目运行到小程序出现下面提示
HBuildx项目运行到小程序出现下面提示提示服务器已开启,没有报错但是小程序没有反应,这种情况下是由于你不是该项目的开发者导致的.需要在开发者平台去设置添加你为项目成员即可.
如何把uni-app项目运行到小程序开发者工具？
1,HBuilderX的设置 1.1,将appid配置到manifest.json文件中 1.2,HBuilderX中--工具--设置,此时,打开了setting.json文件 1.3,选中--运行配 ...
微信开发众筹项目视频教学小程序+java后端开发+mysql数据库
用HBuilder X开发微信小程序,java后端开发工具idea,mysql数据库,主要功能有:用户管理.分类列表.分类金额.众筹列表.订单列表.系统设置.权限分配源码下载地址:>>& ...
微信小程序开发手记之七：一个小程序上线后的总结（上）
终于,经过大概一周时间,磕磕绊绊地提交审核了,一个移动猿开发小程序,也算有了些心得,也遇到了些坑,这里和大家一起分享下. 怎么样调布局先说一个题外话,最后引入正题. 如果翻看过一些资料,大家肯定很容 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
解决uniapp 小程序 vendor.js过大大于500K 无法转换ES5问题
项目页面147个,编译后的vendor.js大小2.4M,导致无法正常转换ES5,导致sourcemap下载后都是分号;;;;;, 无法定位线上错误日志的文件位置. 第一步是最重要的,非核心页面做分包 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
run `npm fund` for details解决，前端开发：项目运行npm install 提示XXX ...for funding run `npm fund`...的解决方法
run npm fund for details解决,前端开发:项目运行npm install 提示XXX -for funding run npm fund-的解决方法 35 packages ar ...
关于汽车APP开发的项目优势
近年来,随着汽车智能化.车联网.以及移动4G网络的发展,与汽车相关的APP不在少数.汽车APP开发发展到现在,其中的优势日益增长,而汽车APP所表示出来的功能也逐渐被人们所接受.那么,关于汽车APP开 ...

解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题

分包分包分包！！！！！

解决方案一：分包

解决方案二：压缩vendor.js文件

总结

解决HbuiderX将uni-app开发的项目运行到小程序编译后文件vendor.js太大的问题相关推荐

最新文章

热门文章