[设计]Umi-v4.x(MFSU+支持Vite+依赖预打包)

• @code https://github.com/umijs/umi-next (opens new window)
• @doc https://next.umijs.org/ (opens new window)

---

简介

推荐pnpm安装

---

MFSU

• https://github.com/umijs/umi-next/tree/master/packages/mfsu (opens new window)

比 Vite 还快的 Webpack 打包方案

---

数据流

• https://umijs.org/docs/max/data-flow (opens new window)

基于 hooks

微前端

• https://umijs.org/docs/max/micro-frontend (opens new window)

状态管理dva

• https://umijs.org/docs/max/dva (opens new window)

@connect(({ user }) => ({
  user,
}))

---

微生成器 @sub

@ps 感觉怪怪的

• @doc https://umijs.org/docs/guides/generator (opens new window)

umi g page foo

umi g page bar --dir

g page far/far/away/kingdom

---

调试

• XSwtich
  • @dl https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffo... (opens new window)

chrome插件

在线上项目调试本地代码

$SOCKET_SERVER=http://127.0.0.1:8000/ npx umi dev

===
{
  "proxy": [
    // 数组的第 0 项的资源会被第 1 项目替换
    [
      "https://www.myproject.com/umi.2c8a01df.js",
      "http://127.0.0.1:8000/umi.js"
    ],
    // 使用正则可以方便处理分包情况下 js 资源的加载
    [
      "https://www.myproject.com/(.*\.js)",
      "http://127.0.0.1:8000/$1",
    ],
    // 如果需要验证视觉表现，不要忘记替换 css 资源
    [
      "https://www.myproject.com/umi.ae8b10e0.css",
      "http://127.0.0.1:8000/umi.css"
    ]
  ]
}

---

参考 @ref

• Umi 4 RC 发布

  • https://zhuanlan.zhihu.com/p/462930831 (opens new window)

• umi使用mfsu的问题，有人遇到过吗

  • https://www.zhihu.com/question/493039832 (opens new window)

• umi-blog-example

  • https://github.com/umijs/umi-blog-example (opens new window)
  • https://umijs.org/docs/tutorials/blog (opens new window)