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

分包分包分包!!!!!

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

众所周知,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进行压缩,暂时没有这方面经验。分包没有解决问题的建议百度搜索其他网友的方案

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413717.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[css] 怎样把单位cm转换成px呢(在打印时有时会用到)

[css] 怎样把单位cm转换成px呢(在打印时有时会用到) 1px所代表的长度2.54cm/分辨率 1cm分辨率/2.54个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前…

微信小程序跳转页面后onload中获取到的参数值和跳转页面时传的参数不一样

channel是一个从后端获取的被加密的一个字符串且已经被encode,我不对其进行修改,只在页面中跳转时带上这个参数,有接口需要传给后端这个参数时,传给他decodeURIComponent(channel),理论上没有问题,但是后端…

[css] flex与其他有什么不同,用它有什么好处?

[css] flex与其他有什么不同,用它有什么好处? flex 从根本上不同于之前常用的借助 定位、浮动 的布局。从逻辑思路上来说,flex 布局具有宏观性,提供了一种对于页面中元素如何排布的框架,开发者不需要关注细节和进行额…

敏捷估计与规划pdf

下载地址:网盘下载 《敏捷估计与规划》一书为对敏捷项目进行估计与规划提供了权威实际的指导方针。在本书中,敏捷联盟的共同创始人Mike Cohn讨论了敏捷估计与规划的思想,并使用现实的例子与案例分析向您详细地展示了如何完成工作。本书清晰地…

Mac安装brew及报错处理办法

brew又叫Homebrew,官网安装方式 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" MacOS系统使用Homebrew官方地址时,报错: curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYS…

敏捷武士:看敏捷高手交付卓越软件pdf

下载地址:网盘下载 内容简介: 在激烈竞争和充满无限可能的今天,响应变化的能力已成为组织的核心生存能力。因此,敏捷对于软件开发组织是一个必然的选择,而非一个可有可无选项。但如何正确实施敏捷,从而构建…

[css] ::first-letter有什么应用场景?

[css] ::first-letter有什么应用场景&#xff1f; 段落首字放大效果p:first-letter {font-size: 2em; }<p>This is a test article. This is a test article.</p> <p>这是一个测试</p>个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放…

Missing binding node_modules/node-sass/vendor/darwin-x64-72/binding.node

起因是我换了电脑&#xff0c;将代码从git上把代码down下来之后 yarn //安装依赖 等同于install npm run serve //运行程序先报了一个错误&#xff0c;分析原因是node版本过高&#xff0c;node-sass不支持&#xff0c;然后我看了一下当前电脑版本node17.&#xff0c;之前的电…

LOJ.2718.[NOI2018]归程(Kruskal重构树 倍增)

LOJ2718BZOJ5415洛谷P4768Rank3Rank1无压力 BZOJ最初还不是一道权限题... Update 2019.1.5UOJ上被hack了....好像是纯一条链的数据过不了&#xff0c;不管了....现在不想改。 容易想到按高度Kruskal重构树预处理到点1的距离dis。 建一棵最大生成树&#xff0c;如果随便建的话&a…

[css] 举例说说你对white-space属性的理解

[css] 举例说说你对white-space属性的理解 值 说明 normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap 文本不会换行&#xff0c;文本会在在同一行上继续&#xff0c;直到遇到 <br> 标签为止。 pre-w…

微信小程序复制到剪切板及换行问题

wxml <textarea type"text" v-model"copyContent" placeholder"请输入内容" style""/> <button type"default" click"copy">复制内容</button> data中声明变量 data(){return{copyContent: …

mysql查询某天是本年第几周

SELECT WEEK(date_add(2012-12-31,interval 6 day),2);转载于:https://www.cnblogs.com/remember-forget/p/9334878.html

[css] 为什么伪类的content不能被选中?

[css] 第432天 为什么伪类的content不能被选中&#xff1f; 伪类不是真正的DOM,无DOM相关的属性和方法个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

解决Vue跳转到当前路由报错问题

一、问题背景 官网首页Herder鼠标悬浮有很多二级页面&#xff0c;点击二级页面会进行跳转&#xff0c;当我已经在一个二级页面时&#xff0c;点击顶部导航中当前二级页面的其中一个状态&#xff08;其实可以用三级页面&#xff0c;但是因为内容不多&#xff0c;我将一些内容写…

清除Pycharm设置的方法

Mac 按需运行下面的 rm 删除命令 # Configuration rm -rf ~/Library/Preferences/PyCharm* # Caches rm -rf ~/Library/Caches/PyCharm* # Plugins rm -rf ~/Library/Application Support/PyCharm* # Logs rm -rf ~/Library/Logs/PyCharm* Windows 找到下面的路径&#xff0c;然…

[css] 如何取消页面中选中的文字?

[css] 如何取消页面中选中的文字&#xff1f; user-select: none; /* browser-specific values */ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一…

GridView直接更新数据,kartik\grid\EditableColumn用法 [ 2.0 版本 ]

GridView直接更新数据&#xff0c;kartik\grid\EditableColumn用法 [ 2.0 版本 ] 视图的_columns.php文件&#xff0c;这里用到的是crudajax生成的 <?php use yii\helpers\Url; use common\models\ProductCategory; return [ [ class > kartik\grid\SerialColumn, width…

[css] 什么是关键帧动画?

[css] 什么是关键帧动画&#xff1f; 表示关键状态的帧动画叫做关键帧动画。 所谓关键帧动画&#xff0c;就是给需要动画效果的属性&#xff0c;准备一组与时间相关的值&#xff0c;这些值都是在动画序列中比较关键的帧中提取出来的&#xff0c;而其他时间帧中的值&#xff0c…

python webdriver firefox 登录126邮箱,先添加联系人,然后进入首页发送邮件,带附件。...

代码&#xff1a;#encodingutf-8from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWaitfrom selenium.webdriver.support import expected_con…

[vue] 你是从vue哪个版本开始用的?你知道1.x和2.x有什么区别吗?

[vue] 你是从vue哪个版本开始用的&#xff1f;你知道1.x和2.x有什么区别吗&#xff1f; 像1.0与2.0&#xff0c;我只知道一点-。- 1、 2.0生命生命周期变化感觉变得更加语义化一点&#xff08;有规律可寻&#xff0c;更好记了&#xff09;&#xff0c;而且增加了beforeUpdate、…