-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
191 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| --- | ||
| id: sub-packages | ||
| title: Sub Packages | ||
| sidebar_label: Sub Packages | ||
| --- | ||
|
|
||
| Sub Packages is a common concept in most Mini Program platforms to improve load performance and code | ||
| structure. It can be regarded as chunk split in Web development. | ||
|
|
||
| Here are some useful links to their official documents. | ||
|
|
||
| - [WeChat sub packages](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html) | ||
|
|
||
| - [QQ sub packages](https://q.qq.com/wiki/develop/miniprogram/frame/basic_ability/basic_pack.html) | ||
|
|
||
| - [Alipay sub packages](https://opendocs.alipay.com/mini/framework/subpackages) | ||
|
|
||
| - [Baidu sub packages](https://smartprogram.baidu.com/docs/develop/framework/subpackages/) | ||
|
|
||
| - [Toutiao sub packages](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/subpackages/introduction) | ||
|
|
||
| ## Problems | ||
|
|
||
| The original design of sub packages based code splitting result in several limitations. A sub | ||
| package cannot `require` any module in the main package nor other sub packages. | ||
|
|
||
| Developers have to place shared code in main package manually, otherwise they will get a compile | ||
| error from the Mini Program dev tool. In another hand, if a module was only required by a sub | ||
| package, developers should move it into the sub package to reduce size of main package. | ||
|
|
||
| ## Hoist and nohoist | ||
|
|
||
| In GojiJS, we use [Webpack](https://webpack.js.org/) to analyze module dependencies and bundle the | ||
| code. With [code splitting ](https://webpack.js.org/guides/code-splitting/) we are able to import | ||
| dependents in a sub package from anywhere we want, like the main package, node_modules or even other | ||
| sub packages. GojiJS can **hoist** the shared code into a common chunk file ( usually | ||
| `_goji_commons.js` ) in the main package. | ||
|
|
||
| Here is an example that has 5 pages, one is in the main package and others are in 2 sub packages ( | ||
| `packageA` and `packageB` ). | ||
|
|
||
|  | ||
|
|
||
| GojiJS hoist modules to root common chunk. By doing this the dependencies can match Mini Program sub | ||
| packages' limitations. | ||
|
|
||
|  | ||
|
|
||
| ### `nohoist.enable` | ||
|
|
||
| `boolean = true` if in production mode, otherwise `false`. | ||
|
|
||
| In above example, `redux` and `date-fns` are not shared code so they can be moved into sub packages | ||
| to reduce size of main package. We call that optimization **nohoist**. | ||
|
|
||
| You can change `nohoist.enable` option in `goji.config.js` to toggle this feature. | ||
|
|
||
| > `nohoist.enable` is set to false in development mode to speed up code bundling. | ||
|  | ||
|
|
||
| ### `nohoist.maxPackages` | ||
|
|
||
| `number = 1` | ||
|
|
||
| Some modules, like `lodash` in the example, are shared only by sub packages. It is possible to | ||
| forked them into sub packages. Although the size of total packages increases, it does reduce the | ||
| size of main package. | ||
|
|
||
| To enable this feature, you can set `nohoist.maxPackages` to a number N above 1. A module shared | ||
| less than or equal N will be forked into `packageName/_goji_nohoist_[contenthash].js`. | ||
|
|
||
|  | ||
|
|
||
| Although the code are duplicated, the runtime closure is still a singleton. For more details see | ||
| [Independent packages](#independent-packages). | ||
|
|
||
| > Please note this feature may heart user lading time because more duplicated code are generated. | ||
| > You should only use it if size of main package was exceeded or about to exceed. | ||
| ### `nohoist.test` | ||
|
|
||
| `function (module, chunks) => boolean` `RegRex` `string` | ||
|
|
||
| You can use this options to nohoist specific modules. | ||
|
|
||
| ## Independent packages | ||
|
|
||
| An independent package is a special case of sub packages. Only | ||
| [WeChat](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html), | ||
| [QQ](https://q.qq.com/wiki/develop/miniprogram/frame/basic_ability/basic_pack.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85) | ||
| and [Baidu](https://smartprogram.baidu.com/docs/develop/framework/subpackages_independent/) Mini | ||
| Program support this feature. | ||
|
|
||
| GojiJS support this feature in the similar way as nohoist. | ||
|
|
||
| First, GojiJS forks all deepened modules into `packageName/_goji_commons.js`, Then GojiJS generates | ||
| a new `packageName/_goji_runtime.js` to run load these code in the independent package and make sure | ||
| each module should has a consistent runtime closure. | ||
|
|
||
| To create an independent package you should add `independent: true` to `subPackages` in | ||
| `app.config.ts`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <mxfile host="app.diagrams.net" modified="2021-10-21T03:54:50.569Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36" etag="nMb-y9iR6xylIjcIfJQ_" version="15.5.6" type="device"><diagram name="Page-1" id="ad52d381-51e7-2e0d-a935-2d0ddd2fd229">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</diagram></mxfile> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/goji.js.org/website/translated_docs/zh-CN/sub-packages.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| --- | ||
| id: sub-packages | ||
| title: 分包加载 | ||
| sidebar_label: 分包加载 | ||
| --- | ||
|
|
||
| 分包加载是小程序平台的常见概念，用来优化加载性能和代码结构。 它可以被看作Web开发中的代码分割。 | ||
|
|
||
| 这里是一些有用的官方文档链接。 | ||
|
|
||
| - [微信分包加载](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html) | ||
|
|
||
| - [QQ 分包加载](https://q.qq.com/wiki/develop/miniprogram/frame/basic_ability/basic_pack.html) | ||
|
|
||
| - [支付宝分包加载](https://opendocs.alipay.com/mini/framework/subpackages) | ||
|
|
||
| - [百度分包加载](https://smartprogram.baidu.com/docs/develop/framework/subpackages/) | ||
|
|
||
| - [头条分包加载](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/framework/subpackages/introduction) | ||
|
|
||
| ## 问题 | ||
|
|
||
| 原始的基于子包的代码分割设计导致了一些限制。 一个子包不能依赖（`require`）任何在主包和其他子包中的模块。 | ||
|
|
||
| 开发者必须手动将共享的代码放在主包中，否则小程序开发者工具将反馈一个编译 错误。 另一方面，如果模块只被一个子包依赖。 开发者应该将它移动到子包里，以减少主包的体积。 | ||
|
|
||
| ## Hoist 和 nohoist | ||
|
|
||
| 在 GojiJS 中，我们使用 [Webpack](https://webpack.js.org/) 分析模块依赖关系并打包代码。 使用[代码拆分](https://webpack.js.org/guides/code-splitting/)我们可以在子包里从任何地方导入依赖， 比如主包、node_modules、甚至 其他子包。 GojiJS 可以把共享的代码 ** 提升（hoist）**到主包的公共文件（一般是 `_goji_commons.js`）。 | ||
|
|
||
| 这里是一个例子，它有五个页面，一个在主包里，其他的在两个子包里 ( `packageA` 和 `packageB`)。 | ||
|
|
||
|  | ||
|
|
||
| GojiJS 把模块提升到了根目录的公共文件。 这样做之后，就可以满足小程序分包加载的依赖限制了。 | ||
|
|
||
|  | ||
|
|
||
| ### `nohoist.enable` | ||
|
|
||
| `boolean = true` 仅当生产模式，否则为 `false`。 | ||
|
|
||
| 在上面的例子里， `redux` 和 `date-fns` 不是共享代码，因此他们可以被移动到子包里，以减少主包的大小。 我们将这种优化叫做 ** nohoist **。 | ||
|
|
||
| 您可以更改`goji.config.js` 中的 `nohoist.enable ` 选项来开启/关闭此功能。 | ||
|
|
||
| > `nohoist.enable` 在开发模式中设置为 false，以加速代码打包。 | ||
|  | ||
|
|
||
| ### `nohoist.maxPackages` | ||
|
|
||
| `number = 1` | ||
|
|
||
| 某些模块——比如例子里的 `lodash` 只被子包内共享。 是有可能将它们复制到各个子包里的。 虽然会增大总包的体积，但的确减少了主包的体积。 | ||
|
|
||
| 要启用此功能，您可以将 `nohoist.maxPackages` 设置为大于 1 的数字 N 。 如果一个模块被小于等于 N个子包依赖，它将被复制到 `packageName/_goji_nohoist_[contenthash].js` 中。 | ||
|
|
||
|  | ||
|
|
||
| 虽然代码被复制，但它的运行时闭包仍然是一个单例。 了解更多细节，请查看 [独立分包](#independent-packages)。 | ||
|
|
||
| > 请注意此功能可能会因为生成更多重复的代码而损害用户加载时间。 您应当只在主包大小超出或即将超过时使用它。 | ||
| ### `nohoist.test` | ||
|
|
||
| `function (module, chunks) => boolean` `RegRex` `string` | ||
|
|
||
| 您可以使用此字段提升特定的模块。 | ||
|
|
||
| ## 独立分包 | ||
|
|
||
| 独立分饱是一种特殊的子包。 只有 [微信](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html)、 [QQ](https://q.qq.com/wiki/develop/miniprogram/frame/basic_ability/basic_pack.html#%E7%8B%AC%E7%AB%8B%E5%88%86%E5%8C%85) 和 [百度](https://smartprogram.baidu.com/docs/develop/framework/subpackages_independent/) 小程序支持此功能。 | ||
|
|
||
| GojiJS 支持此功能，方法类似于 nohoist 。 | ||
|
|
||
| 首先，GojiJS 将依赖的模块复制到 `packageName/_goji_commons.js`里，然后生成新的 `packageName/_goji_runtime.js ` 以在独立分包中运行这些代码，并确保每个模块应该有一致的运行时闭包。 | ||
|
|
||
| 若要创建一个独立分包，您需要在 `app.config.ts` 的`subPackages` 字段中添加 ` independent: true` 。 |