分包

作为一个对performance极度重视的框架，分包作为提升小程序体验的重要能力，是必须支持的。

微信文档中有以下三种分包，mpx对这些能力都做了较好的支持。

分包是小程序平台提供的原生能力，mpx是对该能力做了部分加强，目前微信的分包机制是最全面的，百度其次，支付宝暂时无此能力，请根据平台决定如何使用。

普通分包

mpx中会将 app.mpx（入口文件，也不一定非要叫app.mpx） 中packages域下的路径带root为key的query则被解析认为是使用分包加载。

使用分包一定要记得阅读下面的分包注意事项

  1. // @file src/app.mpx
  2. <script type="application/json">
  3.   {
  4.     "pages": [
  5.       "./pages/index/index"
  6.     ],
  7.     "packages": [
  8.       "{npmPackage || relativePathToPackage}/index?root=test"
  9.     ]
  10.   }
  11. </script>
  13. // @file src/packages/index.mpx (子包的入口文件)
  14. <script type="application/json">
  15.   {
  16.     "pages": [
  17.       "./pages/other/other",
  18.       "./pages/other/other2"
  19.     ]
  20.   }
  21. </script>

打包结果：dist/app.json

  1. {
  2.   "pages": [
  3.     "pages/index/index"
  4.   ],
  5.   "subPackages": [
  6.     {
  7.       "root": "test",
  8.       "pages": [
  9.         "pages/other/other",
  10.         "pages/other/other2"
  11.       ]
  12.     }
  13.   ]
  14. }

分包加载的好处详见微信的文档。路径冲突的概率也大大降低，只需要保证root不同即可。

分包预下载

仅微信小程序提供该部分能力

分包预下载是在json中新增一个 preloadRule 字段，mpx打包时候会原封不动把这个部分放到app.json中，所以只需要按照 微信小程序官方文档 - 分包预下载 配置即可。

前面的普通分包中提到了subpackages是根据用户在package中通过增加query，key为root来指定分包名。我们进一步扩展了这个能力，允许用户传递更多的query。

比如：

  1. // @file src/app.mpx
  2. <script type="application/json">
  3.   {
  4.     "pages": [
  5.       "./pages/index/index"
  6.     ],
  7.     "packages": [
  8.       "{npmPackage || relativePathToPackage}/index?root=xxx&name=subpack1"
  9.     ]
  10.   }
  11. </script>
  13. // @file src/packages/index.mpx (子包的入口文件)
  14. <script type="application/json">
  15.   {
  16.     "pages": [
  17.       "./pages/other/other",
  18.       "./pages/other/other2"
  19.     ]
  20.   }
  21. </script>

打包结果：dist/app.json

  1. {
  2.   "pages": [
  3.     "pages/index/index"
  4.   ],
  5.   "subPackages": [
  6.     {
  7.       "name": "subpack1",
  8.       "root": "xxx",
  9.       "pages": [
  10.         "pages/other/other",
  11.         "pages/other/other2"
  12.       ]
  13.     }
  14.   ]
  15. }

分包注意事项

当我们使用分包加载时，依赖包内的跳转路径需注意，比如要跳转到other2页面
不用分包时会是：wx.jump/pages/other/other2
使用分包后应为：/test/pages/other/other2
即前面会多?root={rootKey}的rootKey这一层

为了解决这个问题，有三种方案：

  • import的时候在最后加’?resolve’, 例如: import testPagePath from '../pages/testPage.mpx?resolve' , 编译时就会把它处理成正确的完整的绝对路径。

  • 使用相对路径跳转。

  • 定死使用的分包路径名，直接写/{rootKey}/pages/xxx （极度不推荐，尤其在分包可能被多方引用的情况时）

建议使用第一种。