Skip to content

Commit

Permalink
add documentatio for goji.config.js
Browse files Browse the repository at this point in the history
  • Loading branch information
malash committed Nov 24, 2023
1 parent 4d7a381 commit 8e95dea
Show file tree
Hide file tree
Showing 8 changed files with 2,158 additions and 1,049 deletions.
212 changes: 212 additions & 0 deletions packages/goji.js.org/docs/advanced/config.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
---
sidebar_position: 1
---

# Project Config

Normally GojiJS works out of the box, but if you want to customize the build process and result, you
can use the `goji.config.js` file.

## Example

An example of the configuration file looks like this:

```js
// `goji.config.js`

module.exports = {
progress: true,
watch: true,
outputPath: path.join(__basedir, 'dist'),
nohoist: {
maxPackages: 3,
},
parallel: {
loader: 4,
minimize: 4,
},
};
```

## Options - bundle tooling

### `progress`

- Type: `boolean | undefined`

- Default: `true`

A boolean value to enable/disable the progress output of GojiJS CLI.

### `watch`

- Type: `boolean | undefined`

- Default: `true` on development mode and `false` on production mode.

A boolean value to enable/disable the watch mode of GojiJS CLI.

### `outputPath`

- Type: `string | undefined`

- Default: `[basedir]/dist/[target]`

The output path of GojiJS CLI. The default folder structure is like this:

```
.
├── dist
│   ├── alipay
│   ├── baidu
│   ├── qq
│   ├── toutiao
│   └── wechat
└── src
```

### `parallel`

- Type: `undefined | number | { loader?: number; minimize?: number }`

- Default: `undefined`

A number or an object to enable/disable the parallel mode of GojiJS CLI. You can use `number` to
specify the number for overall parallel jobs. You can also use an object to specify the number for
each parallelizable stage.

### `parallel.loader`

- Type: `number | undefined`

- Default: value based on the number of CPU cores.

It equals to the number `workers` option of
[thread-loader](https://webpack.js.org/loaders/thread-loader/) plus `1`.

> Note that too many parallel jobs may cost too much resources and even slow down performance. See
> [Amdahl's law](https://en.wikipedia.org/wiki/Amdahl%27s_law).
> So we set a maximum of `workers` to 3 if `parallel.loader` is `undefined`.
### `parallel.minimize`

- Type: `number | undefined`

- Default: value based on the number of CPU cores.

The `parallel` option of
[TerserWebpackPlugin](https://webpack.js.org/plugins/terser-webpack-plugin/#parallel).

### `configureBabel`

- Type: `undefined | (config: any) => undefined`

A function to configure the Babel config inside GojiJS.

`config` is the [Babel's config object](https://babeljs.io/docs/en/config-files).

```js
module.exports = {
configureBabel: config => {
config.plugins.push('babel-plugin-xxx');
},
};
```

### `configureWebpack`

- Type: `undefined | (config: webpack.Configuration, webpackInGoji: typeof webpack) => undefined`

A function to configure the Webpack config inside GojiJS.

The `config` parameter is the [Webpack's config object](https://webpack.js.org/configuration/) that
you can modify it directly.

```js
module.exports = {
configureWebpack: (config, webpack) => {
config.plugins.push(new OtherWebpackPlugin());
},
};
```

The `webpackInGoji` parameter is the instance of Webpack. In some cases, you may want to use the
fields/methods from it.

```js
module.exports = {
configureWebpack: (config, webpack) => {
config.plugins.push(
new webpack.DefinePlugin({
MY_ENV: 'hello world',
}),
);
},
};
```

## Options - output optimizations

### `nohoist`

In GojiJS, we utilize [Webpack](https://webpack.js.org/) to analyze module dependencies and bundle
the code. Through [code splitting](https://webpack.js.org/guides/code-splitting/), we can import
dependencies in a
[subpackage](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html) from
various locations, such as the main package, ` node_modules`, or even other subpackages. GojiJS can
**hoist** the shared code into a common chunk file (usually `\_goji_commons.js`) in the main
package.

Here is an example with 5 pages, where one is in the main package, and the others are in two
subpackages (`packageA` and `packageB`).

![sub packages example](https://user-images.githubusercontent.com/1812118/138204963-4829b600-ac1a-4273-89ab-cf36d5cd03da.png)

In GojiJS, modules are hoisted to the root common chunk. This approach ensures that dependencies
align with the limitations of Mini Program subpackages.

### `nohoist.enable`

- Type: `boolean | undefined`

- Default: `true` in production mode and `false` otherwise.

In the above example, `redux` and `date-fns` are not considered shared code, so they can be moved
into subpackages to reduce the size of the main package. This optimization is referred to as
**nohoist**.

To enable or disable this feature, you can set the `nohoist.enable` option to `true`.

### `nohoist.maxPackages`

- Type: `number | undefined`

- Default: `1`

Some modules, such as `lodash` in the example, are shared only by subpackages. It is possible to
fork them into subpackages. While this increases the size of the total packages, it effectively
reduces the size of the main package.

To enable this feature, you can set `nohoist.maxPackages` to a number N greater than 1. A module
shared less than or equal to 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)

Even though the code is duplicated, the runtime closure remains a singleton.

This feature also works with
[independent packages](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/independent.html).

> Please note that this feature may impact user loading time because more duplicated code is
> generated. It should only be used if the size of the main package has exceeded or is about to
> exceed the limit.
### `nohoist.test`

- Type:
`undefined | string | RegExp | ((module: webpack.Module, chunks: Array<webpack.Chunk>) => boolean)`

- Default: `undefined`

You can use this options to nohoist specific modules.
2 changes: 1 addition & 1 deletion packages/goji.js.org/docs/advanced/css-in-js.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 2
sidebar_position: 3
---

# CSS-in-JS
Expand Down
2 changes: 1 addition & 1 deletion packages/goji.js.org/docs/advanced/css.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 1
sidebar_position: 2
---

# CSS Module
Expand Down
2 changes: 1 addition & 1 deletion packages/goji.js.org/docs/advanced/plugins.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 4
---

# Plugins
Expand Down
2 changes: 1 addition & 1 deletion packages/goji.js.org/docs/advanced/sub-packages.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 5
sidebar_position: 6
---

# Sub Packages
Expand Down
2 changes: 1 addition & 1 deletion packages/goji.js.org/docs/advanced/testing.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
sidebar_position: 4
sidebar_position: 5
---

# Testing Library
Expand Down
8 changes: 4 additions & 4 deletions packages/goji.js.org/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@
},
"dependencies": {
"@crowdin/cli": "3",
"@docusaurus/core": "2.0.0-beta.18",
"@docusaurus/preset-classic": "2.0.0-beta.18",
"@docusaurus/core": "^2.4.3",
"@docusaurus/preset-classic": "^2.4.3",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.1.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.0.0-beta.18",
"@tsconfig/docusaurus": "^1.0.5",
"@docusaurus/module-type-aliases": "^2.4.1",
"@tsconfig/docusaurus": "^1.0.7",
"typescript": "^4.6.3"
},
"browserslist": {
Expand Down
Loading

0 comments on commit 8e95dea

Please sign in to comment.