uniapp踩坑系列之二

今天在用真机在小程序上预览的时候。发现无法预览。一直报错超过微信最大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中入口引入的库是否过大。

标签：uniapp,style,系列,form,formPage,之二,selectCity,main,pages
来源： https://blog.csdn.net/baidu_41601048/article/details/122337788