Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: support en docs #12210

Merged
merged 4 commits into from
Mar 17, 2024
Merged

docs: support en docs #12210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d0c2f10
docs: directory structure for en docs
PeachScript Jan 24, 2024
67cb297
Merge commit 'c952494d991919dcc9963f3c6335d23553b92a89' into support/…
sorrycc Mar 17, 2024
abb7619
docs: translate
sorrycc Mar 17, 2024
3c0f7e6
chore: update
sorrycc Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/.dumi/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// hide mf related docs
.dumi-default-sidebar-group {
a[href="/docs/guides/mfsu"],
a[href="/en-US/docs/guides/mfsu"],
a[href="/docs/max/mf"],
a[href="/en-US/docs/max/mf"] {
display: none;
}
}
1 change: 1 addition & 0 deletions docs/.dumi/pages/index.en-US.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '.';
175 changes: 27 additions & 148 deletions docs/.dumirc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,15 +32,18 @@ export default defineConfig({
define: {
'process.env.UMI_VERSION': version,
},
locales: [
{ id: 'zh-CN', name: '中文' },
{ id: 'en-US', name: 'EN' },
],
themeConfig: {
name: 'UmiJS',
socialLinks: {
github: 'https://github.com/umijs/umi',
},
footer: 'Open-source MIT Licensed | Copyright © 2017-present',
nav: {
mode: 'override',
value: [
'zh-CN': [
{
title: '介绍',
link: '/docs/introduce/introduce',
Expand All @@ -67,155 +70,31 @@ export default defineConfig({
activePath: '/blog',
},
],
},
sidebar: {
'/docs/guides': [
'en-US': [
{
children: [
{
title: '快速上手',
link: '/docs/guides/getting-started',
},
{
title: '开发环境',
link: '/docs/guides/prepare',
},
{
title: '目录结构',
link: '/docs/guides/directory-structure',
},
{
title: '路由',
link: '/docs/guides/routes',
},
{
title: '插件',
link: '/docs/guides/use-plugins',
},
{
title: 'Mock',
link: '/docs/guides/mock',
},
{
title: '代理',
link: '/docs/guides/proxy',
},
{
title: '样式',
link: '/docs/guides/styling',
},
{
title: '路由数据加载',
link: '/docs/guides/client-loader',
},
{
title: 'TypeScript',
link: '/docs/guides/typescript',
},
{
title: '环境变量',
link: '/docs/guides/env-variables',
},
{
title: '脚手架',
link: '/docs/guides/boilerplate',
},
{
title: '微生成器',
link: '/docs/guides/generator',
},
{
title: '编码规范',
link: '/docs/guides/lint',
},
{
title: '调试',
link: '/docs/guides/debug',
},
{
title: '测试',
link: '/docs/guides/test',
},
{
title: '开发插件',
link: '/docs/guides/plugins',
},
{
title: '使用 Vue',
link: '/docs/guides/use-vue',
},
{
title: 'MPA 模式',
link: '/docs/guides/mpa',
},
// 暂不开放
// {
// title: 'MFSU',
// link: 'docs/guides/mfsu',
// },
],
title: 'Introduce',
link: '/en-US/docs/introduce/introduce',
activePath: '/en-US/docs/introduce',
},
{
title: 'Guide',
link: '/en-US/docs/guides/getting-started',
activePath: '/en-US/docs/guides',
},
{
title: 'API',
link: '/en-US/docs/api/api',
activePath: '/en-US/docs/api',
},
{
title: 'Umi Max',
link: '/en-US/docs/max/introduce',
activePath: '/en-US/docs/max',
},
],
'/docs/max': [
{
children: [
{
title: 'Umi Max 简介',
link: '/docs/max/introduce',
},
{
title: '布局与菜单',
link: '/docs/max/layout-menu',
},
{
title: 'antd',
link: '/docs/max/antd',
},
{
title: '图表',
link: '/docs/max/charts',
},
{
title: '数据流',
link: '/docs/max/data-flow',
},
{
title: '请求',
link: '/docs/max/request',
},
{
title: '权限',
link: '/docs/max/access',
},
{
title: '国际化',
link: '/docs/max/i18n',
},
{
title: '微前端',
link: '/docs/max/micro-frontend',
},
{
title: 'styled-components',
link: '/docs/max/styled-components',
},
{
title: 'react-query',
link: '/docs/max/react-query',
},
{
title: 'valtio',
link: '/docs/max/valtio',
},
{
title: 'dva',
link: '/docs/max/dva',
},
{
title: '站点统计',
link: '/docs/max/analytics',
},
],
title: 'Blog',
link: '/en-US/blog/umi-4-rc',
activePath: '/en-US/blog',
},
],
},
Expand Down
50 changes: 50 additions & 0 deletions docs/docs/blog/code-splitting.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
toc: content
order: 5
group:
title: Blog
---

# 代码拆分指南

Umi 4 默认 按页拆包、按需加载（这近似等同于 Umi 3 中的 `dynamicImport`），通过 [`loading.tsx`](../docs/guides/directory-structure#loadingtsxjsx) 来自定义加载动画。

### 使用分包策略

Umi 4 内置了不同的代码拆分策略 ( [codeSplitting](../docs/api/config#codesplitting) ) ，通过配置开启：

```ts
// .umirc.ts
export default {
codeSplitting: {
jsStrategy: 'granularChunks',
},
};
```

这会按照一定的优化策略进行自动分包，若需手动进行更细致的分包，请参见下文。

### 手动拆分

当你的产物体积变大时，可进一步手动拆包：

```ts
import { lazy, Suspense } from 'react'

// './Page' 该组件将被自动拆出去
const Page = lazy(() => import('./Page'))

export default function() {
return (
<Suspense fallback={<div>loading...</div}>
<Page />
</Suspense>
)
}
```

通常情况下，我们会手动拆分引用了较大第三方库的组件，实现按需加载。

### 分析产物构成

通过指定 [ANALYZE](../docs/guides/env-variables#analyze) 环境变量可以分析产物构成，根据分析结果来修改代码和进一步决策。
Loading
Loading