uniapp踩坑系列之二

今天在用真机在小程序上预览的时候。发现无法预览。一直报错超过微信最大2m。总共也才3个页面,怎么就那么大?

经过小程序包分析工具发现。打包以后的vender.js文件达到1.7m,最后发现,在main.js中引入了一些无用的第三方库。包括echarts和uview,node_modules中有两个包:uview-ui和uview,删除以后xbuild运行发行在小程序开发者工具中发现只有738k。

第二是采用分包策略:

第一步:拆分原本在pages文件件中的页面。

uniapp踩坑系列之二

第一步:在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中入口引入的库是否过大。

上一篇:jquery实现动态元素的添加与删除


下一篇:elementUI复杂表单验证