1. 在manifest.json文件中启用分包代码优化
    "mp-weixin": {
    		"optimization": {
    			"subPackages": true // 启用分包代码优化
    		},
    }

  2. 在pages.json文件中添加分包定义,与初始pages同级

    "subPackages": [{
    		// 分包目录
    		"root": "charts-common",
    		"name": "charts",
    		"pages": [{
    			"path": "index/index",
    			"style": {
    				"navigationBarTitleText": "可视化图表组件",
    				"enablePullDownRefresh": false
    			}
    		}]
    	}]

  3. 创建分包目录及页面,与初始pages同级


     
  4. 在pages.json文件中。使用分包组件的页面,需要声明组件位置及组件占位符
    {
    			"path": "pages/my/my",
    			"style": {
    				"navigationStyle": "custom",
    				// 组件路径
    				"usingComponents": {
    					"lines-chart": "../../charts-common/components/linesChart/linesChart",
    				},
    				// 组件占位符
    				"componentPlaceholder": {
    					"lines-chart": "view",
    				}
    			}
    		}
  5. 组件使用与一般组件使用差别不大


     
  6. 特别注意,路径使用绝对路径会更容易被识别
    且在pages.json及view中必须使用 “ - ” 拼接的组件名称,使用驼峰会导致运行到微信开发者工具中无法识别
    ​​​​​​​
  7. 最后可以在微信小程序中,详情=》代码依赖分析,查看主包及分包体积


Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐