diff --git a/packages/goji.js.org/docs/sub-packages.md b/packages/goji.js.org/docs/sub-packages.md new file mode 100644 index 00000000..6c92808f --- /dev/null +++ b/packages/goji.js.org/docs/sub-packages.md @@ -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` ). + +![sub packages example](https://user-images.githubusercontent.com/1812118/138204963-4829b600-ac1a-4273-89ab-cf36d5cd03da.png) + +GojiJS hoist modules to root common chunk. By doing this the dependencies can match Mini Program sub +packages' limitations. + +![hoist example](https://user-images.githubusercontent.com/1812118/138205488-dddaf015-f752-4720-90ec-b216d6f7dc27.png) + +### `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.enable example](https://user-images.githubusercontent.com/1812118/138205001-0ea82de4-81b1-494c-9e30-f48d462611be.png) + +### `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`. + +![nohoist.maxPackages example](https://user-images.githubusercontent.com/1812118/138208851-2c0c7fe3-6e55-4744-b4af-b74fca59228a.png) + +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`. diff --git a/packages/goji.js.org/resources/packages.drawio b/packages/goji.js.org/resources/packages.drawio new file mode 100644 index 00000000..38fe2bf9 --- /dev/null +++ b/packages/goji.js.org/resources/packages.drawio @@ -0,0 +1 @@ +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 \ No newline at end of file diff --git a/packages/goji.js.org/website/i18n/en.json b/packages/goji.js.org/website/i18n/en.json index 83968702..39d4567f 100644 --- a/packages/goji.js.org/website/i18n/en.json +++ b/packages/goji.js.org/website/i18n/en.json @@ -57,6 +57,10 @@ "title": "Setup", "sidebar_label": "Setup" }, + "sub-packages": { + "title": "Sub Packages", + "sidebar_label": "Sub Packages" + }, "testing": { "title": "Testing Library", "sidebar_label": "Testing" diff --git a/packages/goji.js.org/website/i18n/zh-CN.json b/packages/goji.js.org/website/i18n/zh-CN.json index b0a0122c..529e92ca 100644 --- a/packages/goji.js.org/website/i18n/zh-CN.json +++ b/packages/goji.js.org/website/i18n/zh-CN.json @@ -57,6 +57,10 @@ "title": "安装", "sidebar_label": "安装" }, + "sub-packages": { + "title": "分包加载", + "sidebar_label": "分包加载" + }, "testing": { "title": "测试库", "sidebar_label": "测试" diff --git a/packages/goji.js.org/website/sidebars.json b/packages/goji.js.org/website/sidebars.json index df3dabac..24f22ede 100755 --- a/packages/goji.js.org/website/sidebars.json +++ b/packages/goji.js.org/website/sidebars.json @@ -2,7 +2,7 @@ "docs": { "Get Started": ["introduction", "setup", "preparation"], "Guide": ["app", "page", "hooks", "lifecycle", "refs", "cross-platform"], - "Advanced": ["css", "css-in-js", "plugins", "testing"], + "Advanced": ["css", "css-in-js", "plugins", "testing", "sub-packages"], "FAQ": ["faq"] } } diff --git a/packages/goji.js.org/website/translated_docs/zh-CN/sub-packages.md b/packages/goji.js.org/website/translated_docs/zh-CN/sub-packages.md new file mode 100644 index 00000000..9c71f1b1 --- /dev/null +++ b/packages/goji.js.org/website/translated_docs/zh-CN/sub-packages.md @@ -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`)。 + +![子包示例](https://user-images.githubusercontent.com/1812118/138204963-4829b600-ac1a-4273-89ab-cf36d5cd03da.png) + +GojiJS 把模块提升到了根目录的公共文件。 这样做之后，就可以满足小程序分包加载的依赖限制了。 + +![hoist示例](https://user-images.githubusercontent.com/1812118/138205488-dddaf015-f752-4720-90ec-b216d6f7dc27.png) + +### `nohoist.enable` + +`boolean = true` 仅当生产模式，否则为 `false`。 + +在上面的例子里， `redux` 和 `date-fns` 不是共享代码，因此他们可以被移动到子包里，以减少主包的大小。 我们将这种优化叫做 ** nohoist **。 + +您可以更改`goji.config.js` 中的 `nohoist.enable ` 选项来开启/关闭此功能。 + +> `nohoist.enable` 在开发模式中设置为 false，以加速代码打包。 + +![nohoist.enable 示例](https://user-images.githubusercontent.com/1812118/138205001-0ea82de4-81b1-494c-9e30-f48d462611be.png) + +### `nohoist.maxPackages` + +`number = 1` + +某些模块——比如例子里的 `lodash` 只被子包内共享。 是有可能将它们复制到各个子包里的。 虽然会增大总包的体积，但的确减少了主包的体积。 + +要启用此功能，您可以将 `nohoist.maxPackages` 设置为大于 1 的数字 N 。 如果一个模块被小于等于 N个子包依赖，它将被复制到 `packageName/_goji_nohoist_[contenthash].js` 中。 + +![nohoist.maxPackages 示例](https://user-images.githubusercontent.com/1812118/138208851-2c0c7fe3-6e55-4744-b4af-b74fca59228a.png) + +虽然代码被复制，但它的运行时闭包仍然是一个单例。 了解更多细节，请查看 [独立分包](#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` 。