diff --git a/docs/config/README.md b/docs/config/README.md index 0661e4c9fcde..46e0f8ac03e0 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -16,7 +16,7 @@ toc: menu * Type: `object` * Default: `{}` -配置别名，对引用路径进行隐射。 +配置别名，对引用路径进行映射。 比如： diff --git a/docs/guide/boost-compile-speed.md b/docs/guide/boost-compile-speed.md new file mode 100644 index 000000000000..26eed688cf9d --- /dev/null +++ b/docs/guide/boost-compile-speed.md @@ -0,0 +1,108 @@ +--- +translateHelp: true +--- + +# 如何做编译提速 + + +如果遇到编译慢，内存爆掉，OOM 等问题，可尝试以下方法。 + +## 配置 `nodeModulesTransform` 为 `{ type: 'none' }` + +> 需要 Umi 3.1 。 + +Umi 默认编译 node\_modules 下的文件，带来一些收益的同时，也增加了额外的编译时间。如果不希望 node\_modules 下的文件走 babel 编译，可通过以下配置减少 40% 到 60% 的编译时间。 + +```js +export default { + nodeModulesTransform: { + type: 'none', + exclude: [], + }, +} +``` + +## 查看包结构 + +执行 `umi dev` 或 `umi build` 时，增加环境变量 `ANALYZE=1` 可查看产物的依赖占比。 + + + +注意： + +* `umi dev` 可以实时修改和查看，但会引入一些开发依赖，注意忽略 + +## 配置 externals + +对于一些大尺寸依赖，比如图表库、antd 等，可尝试通过 externals 的配置引入相关 umd 文件，减少编译消耗。 + +比如 react 和 react-dom： + +```js +export default { + // 配置 external + externals: { + 'react': 'window.React', + 'react-dom': 'window.ReactDOM', + }, + + // 引入被 external 库的 scripts + // 区分 development 和 production，使用不同的产物 + scripts: process.env.NODE_ENV === 'development' ? [ + 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js', + ] : [ + 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js', + ], +} +``` + +注意： + +1. 如果要支持 IE10 或以下，external react 还需要额外引入补丁，比如 `https://gw.alipayobjects.com/os/lib/alipay/react16-map-set-polyfill/1.0.2/dist/react16-map-set-polyfill.min.js` +2. 如果 external antd，需同时 external 额外的 moment、react 和 react-dom，并在 antd 前引入 + +## 减少补丁尺寸 + +Umi 默认会包含以下浏览器及其版本的补丁， + +``` +chrome: 49, +firefox: 64, +safari: 10, +edge: 13, +ios: 10, +``` + +选择合适的浏览器版本，可减少不少尺寸，比如配成以下这样，预计可减少 90K （压缩后未 gzip）的尺寸。 + +``` +chrome: 79, +firefox: false, +safari: false, +edge: false, +ios: false +``` + +注意： + +* 把浏览器设为 false 则不会包含他的补丁 + +## 调整 splitChunks 策略，减少整体尺寸 + +TODO，HELP\_WANTED。 + +## 通过 NODE\_OPTIONS 设置内存上限 + +如果出现 OOM，也可以通过增加内存上限尝试解决。比如 `NODE_OPTIONS=--max_old_space_size=4096` 设置为 4G。 + +## 不压缩 + +> 不推荐，紧急情况下使用。 + +编译慢中压缩时间占了大部分，所以如果编译时不压缩可节约大量的时间和内存消耗，但尺寸会增加不少。通过环境变量 `COMPRESS=none` 可跳过压缩。 + +```bash +$ COMPRESS=none umi build +``` diff --git a/docs/guide/boost-compile-speed.zh-CN.md b/docs/guide/boost-compile-speed.zh-CN.md new file mode 100644 index 000000000000..28ae04ad1c75 --- /dev/null +++ b/docs/guide/boost-compile-speed.zh-CN.md @@ -0,0 +1,104 @@ +# 如何做编译提速 + +如果遇到编译慢，内存爆掉，OOM 等问题，可尝试以下方法。 + +## 配置 `nodeModulesTransform` 为 `{ type: 'none' }` + +> 需要 Umi 3.1 。 + +Umi 默认编译 node\_modules 下的文件，带来一些收益的同时，也增加了额外的编译时间。如果不希望 node\_modules 下的文件走 babel 编译，可通过以下配置减少 40% 到 60% 的编译时间。 + +```js +export default { + nodeModulesTransform: { + type: 'none', + exclude: [], + }, +} +``` + +## 查看包结构 + +执行 `umi dev` 或 `umi build` 时，增加环境变量 `ANALYZE=1` 可查看产物的依赖占比。 + + + +注意： + +* `umi dev` 可以实时修改和查看，但会引入一些开发依赖，注意忽略 + +## 配置 externals + +对于一些大尺寸依赖，比如图表库、antd 等，可尝试通过 externals 的配置引入相关 umd 文件，减少编译消耗。 + +比如 react 和 react-dom： + +```js +export default { + // 配置 external + externals: { + 'react': 'window.React', + 'react-dom': 'window.ReactDOM', + }, + + // 引入被 external 库的 scripts + // 区分 development 和 production，使用不同的产物 + scripts: process.env.NODE_ENV === 'development' ? [ + 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.development.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.development.js', + ] : [ + 'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js', + 'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js', + ], +} +``` + +注意： + +1. 如果要支持 IE10 或以下，external react 还需要额外引入补丁，比如 `https://gw.alipayobjects.com/os/lib/alipay/react16-map-set-polyfill/1.0.2/dist/react16-map-set-polyfill.min.js` +2. 如果 external antd，需同时 external 额外的 moment、react 和 react-dom，并在 antd 前引入 + +## 减少补丁尺寸 + +Umi 默认会包含以下浏览器及其版本的补丁， + +``` +chrome: 49, +firefox: 64, +safari: 10, +edge: 13, +ios: 10, +``` + +选择合适的浏览器版本，可减少不少尺寸，比如配成以下这样，预计可减少 90K （压缩后未 gzip）的尺寸。 + +``` +chrome: 79, +firefox: false, +safari: false, +edge: false, +ios: false +``` + +注意： + +* 把浏览器设为 false 则不会包含他的补丁 + +## 调整 splitChunks 策略，减少整体尺寸 + +TODO，HELP\_WANTED。 + +## 通过 NODE\_OPTIONS 设置内存上限 + +如果出现 OOM，也可以通过增加内存上限尝试解决。比如 `NODE_OPTIONS=--max_old_space_size=4096` 设置为 4G。 + +## 不压缩 + +> 不推荐，紧急情况下使用。 + +编译慢中压缩时间占了大部分，所以如果编译时不压缩可节约大量的时间和内存消耗，但尺寸会增加不少。通过环境变量 `COMPRESS=none` 可跳过压缩。 + +```bash +$ COMPRESS=none umi build +``` + diff --git a/docs/plugins/api.md b/docs/plugins/api.md index 9cfbf970b77c..781d477771f3 100644 --- a/docs/plugins/api.md +++ b/docs/plugins/api.md @@ -393,7 +393,7 @@ TODO 修改路由数组。 -### onBuildCompelete({ err?, stats? }) +### onBuildComplete({ err?, stats? }) 构建完成时可以做的事。 diff --git a/docs/plugins/plugin-antd.md b/docs/plugins/plugin-antd.md index ec297a7ef22b..96d6dddb06a3 100644 --- a/docs/plugins/plugin-antd.md +++ b/docs/plugins/plugin-antd.md @@ -44,13 +44,12 @@ translateHelp: true export default { antd: { dark: true, - // or compact: true, }, } ``` -启用暗色主题，只有 antd 使用版本 4 时才支持。紧凑主题在 `antd@>4.1.0` 时支持。暗色主题和紧凑主题无法同时开启。 +启用暗色主题，只有 antd 使用版本 4 时才支持。紧凑主题在 `antd@>4.1.0` 时支持。 ## FAQ diff --git a/docs/plugins/plugin-layout.md b/docs/plugins/plugin-layout.md index 1cb744f15b73..253c38a43d16 100644 --- a/docs/plugins/plugin-layout.md +++ b/docs/plugins/plugin-layout.md @@ -170,7 +170,7 @@ menu 的可配置项包括： * Type: `string` 当前菜单的左侧 icon，可选 antd 的 icon name 和 url，可选。 -> icon name is evaluated as component name => toLowerCase => remove `outlined` | `filled` | `twotone`. For example: `` => `user` +> icon name 为 组件名小写后去掉 `outlined` 或者 `filled` 或者 `twotone`，所得值。举例：`` 的 icon name 即： `user`。 3. hideChildren