UmiJS 是由支付宝开发团队编写的可扩展的企业级 React 框架。支付宝在其内部项目中使用它，优酷和网易等其他几家公司也是如此。
在探索这个框架时，我发现它在一些有趣的方面与 Next.js 相似。两者都支持开箱即用的路由和服务器端渲染以及 TypeScript。
一路上，我对 Umi 很好奇，并决定更深入地研究这个框架，看看它与 Next 相比如何。我根据下面列出的标准评估了这两个框架。这是我的发现。

CSS 支持
Next 支持所有 CSS 样式方法，包括 JS、Sass、Stylus、Less、CSS 模块和 Post CSS 中的 CSS。在常规 CSS 的情况下，您可以将 css 文件导入到您的页面中：

// styles.css
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// pages/_app.js
import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
     

Next 有使用 Sass、Stylus 和 Less 编写 CSS 的官方插件。如果您使用 CSS 模块，则需要遵循 Next 的命名约定.[name].module.css

// Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

// Button.js
import styles from './Button.module.css'

export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}
      

另一方面，Umi 已经放弃了对 Sass 的支持，目前支持常规 CSS、CSS 模块和 Less。如果你想使用 Sass 或 Stylus，你需要配置 webpack 配置来这样做。Umi 自动识别 CSS 模块的使用。

// Example of CSS Modules
import styles from './foo.css';

// Example of Non-CSS Modules
import './foo.css';

webpack定制
代码拆分、热代码重新加载和服务器端渲染等后续功能已经开箱即用。但是，如果您需要额外的功能或只是不同的配置，Next 允许您通过其模块编写自己的配置。配置文件是一个常规的 Node.js 模块，而不是一个 JSON 文件。next.config.js

module.exports = {
  /* config options here */
}
  
umi 也有自己的配置文件，不过是 JSON 文件的形式。

export default {
  base: '/docs/',
  publicPath: '/static/',
  hash: true,
  history: {
    type: 'hash',
  },
}

文档
我发现 Next 的文档更详细地解释了如何使用每个功能。
为了展示每个功能的工作原理，文档将引导您构建一个简单的博客应用程序。
使用 Next.js 构建的示例博客应用程序
另一件需要考虑的事情：Umi 的部分文档尚未翻译成英文（Umi 的主要用户群位于中国）。我不得不使用谷歌翻译功能来帮助我阅读文档。

命令行支持
Umi 有一些有趣的 CLI 支持来生成页面和检查当前的 webpack 配置。

 Usage: umi <command> [options]

  Commands:

    build     build application for production
    config    umi config cli
    dev       start a dev server for development
    generate  generate code snippets quickly
    help      show command helps
    plugin    inspect umi plugins
    version   show umi version
    webpack   inspect webpack configurations
    dva       
    test      test with jest

  Run `umi help <command>` for more information of specific commands.
  Visit https://umijs.org/ to learn more about Umi.

Next 的 CLI 支持仅专注于帮助您部署应用程序。

Usage
  $ next <command>

Available commands
  build, start, export, dev, telemetry

Options
  --version, -v   Version number
  --help, -h      Displays this message

For more information run a command with the --help flag
  $ next build --help

插件系统
umi 的内部功能都是第三方插件。该文档涵盖了其插件系统的工作原理，并配有测试框架。

Next 有自己的一组插件，但我似乎找不到有关如何创建插件并将其与其他开发人员共享的说明。

为什么 Next 有优势
Next 和 Umi 都完全支持构建用于生产的 React 应用程序，几乎不需要配置。Next 对编写 CSS 和自定义 webpack 配置有更完整的支持，而 Umi 更固执己见，对 webpack 配置的支持并不多。

目前，我更喜欢 Next to Umi，因为我发现 Umi 文档有点难以理解。我还找到了更多使用 Next 构建事物的指南，例如电子商务网站和静态网站。

您是否正在添加新的 JS 库以提高性能或构建新功能？如果他们反其道而行之呢？
毫无疑问，前端变得越来越复杂。当您向应用程序添加新的 JavaScript 库和其他依赖项时，您需要更多的可见性以确保您的用户不会遇到未知问题。

1. Ant Design Pro ERESOLVE unable to resolve dependency tree