今天在用真机在小程序上预览的时候。发现无法预览。一直报错超过微信最大2m。总共也才3个页面,怎么就那么大?
经过小程序包分析工具发现。打包以后的vender.js文件达到1.7m,最后发现,在main.js中引入了一些无用的第三方库。包括echarts和uview,node_modules中有两个包:uview-ui和uview,删除以后xbuild运行发行在小程序开发者工具中发现只有738k。
第二是采用分包策略:
第一步:拆分原本在pages文件件中的页面。
第一步:在pages.json新增subPackages选项,如下图所示:
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "风格报价计数器"
}
}
],
"subPackages":[
{
"root":"formPage",
"pages":[
{
"path":"form/form",
"style" :
{
"navigationBarTitleText": "填写房屋信息",
"enablePullDownRefresh": false
}
}
]
},
{
"root":"selectCityPage",
"pages":[
{
"path":"selectCity/selectCity",
"style" :
{
"navigationBarTitleText": "选择城市",
"enablePullDownRefresh": false
}
}
]
}
],
"preloadRule": {
"formPage/form/form": {
"network": "all",
"packages": ["formPage"]
},
"selectCityPage/selectCity/selectCity": {
"network": "all",
"packages": ["selectCityPage"]
}
},
}
第三步:在mainfest.json中新增optimization选项,开启分包
//main.fest.json中新增optimization选项
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx099e646e68351ca7",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"optimization":{
"subPackages":true
}
},
总结:如果真机无法在小程序预览,特别注意main.js中入口引入的库是否过大。