docs: support en docs (#12210)

* docs: directory structure for en docs * docs: translate * chore: update --------- Co-authored-by: PeachScript <[email protected]>
umijs · Mar 17, 2024 · 4957ad2 · 4957ad2
1 parent c952494
commit 4957ad2
Show file tree

Hide file tree

Showing 55 changed files with 11,991 additions and 148 deletions.
diff --git a/docs/.dumi/global.less b/docs/.dumi/global.less
@@ -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;
+  }
+}
diff --git a/docs/.dumi/pages/index.en-US.tsx b/docs/.dumi/pages/index.en-US.tsx
@@ -0,0 +1 @@
+export { default } from '.';
diff --git a/docs/.dumirc.ts b/docs/.dumirc.ts
@@ -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',
@@ -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',
         },
       ],
     },

diff --git a/docs/docs/blog/code-splitting.en-US.md b/docs/docs/blog/code-splitting.en-US.md
@@ -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) 环境变量可以分析产物构成，根据分析结果来修改代码和进一步决策。