问题描述
小程序开发时,通过npm 下载了一些第三方库,然后随着开发的深入,小程序本身页面也比较多,最后导致小程序的体积过大(超过2M),无法正常使用真机预览和调试
这时候就要用到微信小程序的分包功能了
分包过程
分析页面,将一些页面分出去
1.在与pages文件夹同级目录下建立分包文件夹
本项目可以拆分为4个模块,对应4个包,一个主包,三个分包,主包放首页和登录模块以及一些依赖包,注意删除不必要的依赖包,分析依赖可知,主包中占体积最大的主要是npm下载的依赖包,所以要删除不必要的依赖包,并把主包中的页面拆分到其他包去。
拆包方法
1.在与主包pages同目录下建立分包文件夹,在分包中建立自己的pages文件夹; 2.将主包中同一模块的页面剪切到对应分包的pages目录下; 3.拆分过去之后记得更新之前页面上写的关于页面跳转的路径,否则可能会编译失败; 4.分包中可以自己新建npm,可以有自己的图片文件夹;
具体配置如下:
{
"pages": [
"pages/index/index",
"pages/login/login",
"pages/test1/test1"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "GUET物理实验助手",
"navigationBarTextStyle": "black"
},
"subpackages": [{
"root": "data_filling",
"name": "data_filling",
"pages":[
"pages/A102/A102",
"pages/C303/C303",
"pages/C101/C101",
"pages/A202/A202",
"pages/C103/C103",
"pages/C203/C203",
"pages/A204/A204",
"pages/A302/A302",
"pages/C301/C301",
"pages/A304/A304",
"pages/showDataA302_c/showDataA302_c",
"pages/component/input-form-cpn-2/input-form-cpn-2",
"pages/component/exp-title/exp-title",
"pages/component/input-form-cpn/input-form-cpn",
"pages/reportPage/reportPage"
],
"independent": false
},{
"root": "student",
"name": "student",
"pages":[
"pages/student/student",
"pages/viewExpData/viewExpData",
"pages/component/exp-list-cpn/exp-list-cpn",
"pages/component/my-student-cpn/my-student-cpn",
"pages/component/today-cpn/today-cpn",
"pages/exp-guide/exp-guide",
"pages/expDetail1/expDetail1",
"pages/expDetail2/expDetail2"
],
"independent": false
},{
"root": "teacher",
"name": "teacher",
"pages":[
"pages/teacher/teacher",
"pages/contactTeacher/contactTeacher",
"pages/correctExpData/correctExpData",
"pages/tLookExpData/tLookExpData",
"pages/download/download",
"pages/A302CorrectExpData_c/A302CorrectExpData_c"
],
"independent": false
}],
"style": "v2",
"sitemapLocation": "sitemap.json",
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于签到"
}
}
}
项目目录结构
分包后
参考: https://blog.csdn.net/wangzai888/article/details/88852116 微信官方文档-使用分包
|