分包分包分包!!!!!
直接略过网上一下简单操作如勾选运行时是否压缩代码,感觉并没有什么用!
众所周知,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进行压缩,暂时没有这方面经验。分包没有解决问题的建议百度搜索其他网友的方案