微信小程序分包加载实战

# 微信小程序分包加载实战 小程序越做越大，主包超过2M上传失败了。必须做分包加载。 ## 分包配置 ```json { "pages": [ "pages/index/index", "pages/mine/mine" ], "subpackages": [ { "root": "packageA", "name": "shop", "pages": [ "pages/goods/list", "pages/goods/detail", "pages/cart/index" ] }, { "root": "packageB", "name": "community", "pages": [ "pages/post/list", "pages/post/detail" ] } ], "preloadRule": { "pages/index/index": { "network": "all", "packages": ["shop"] } } } ``` ## 关键要点 ```javascript // 分包页面跳转：路径要带分包根目录 wx.navigateTo({ url: '/packageA/pages/goods/detail?id=123' }); // 分包内引用公共组件：用相对路径 // packageA/pages/goods/detail.json { "usingComponents": { "price": "../../components/price/index" } } ``` ## 独立分包 ```json { "subpackages": [ { "root": "packageC", "name": "activity", "independent": true, "pages": ["pages/landing/index"] } ] } ``` 独立分包可以不依赖主包独立运行，适合活动页、分享落地页这种场景。但独立分包不能使用app.js里的全局数据。 分包后主包从2.3M降到了0.8M，首次加载快了一倍多。用户从不同入口进来只下载需要的分包，体验好了不少。