MFSU Why、What、How and FAQ #6766

sorrycc · 2021-06-23T07:53:48Z

Why?

提高研发效率。不管多大的项目，有缓存时启动 1s~3s+，热更新平均 500ms 内，

什么是 MFSU？

🍉 不管多大的项目，有缓存时启动 1s+，热更新平均 500ms 内
🍒 配置 mfsu 开启，无需修改项目代码
🍑 基于 webpack 的通用方案，umi 3 项目均可用
🍓 可用于生产，可多人协作
🥕 beta 阶段提供手把手服务群

启用方式

先确保是 umi 3 项目
修改依赖里的 umi 版本为 "^3.5.0"

- "umi": "3"
+ "umi": "^3.5.0"

重装依赖
修改配置，加上 mfsu 配置

// 只需要 dev，这么配
+ mfsu: {},

// 如果需要针对生产环境生效，这么配
+ mfsu: { production: { output: '.mfsu-production' } },

清空 src/.umi
启动 umi dev

FAQ

卡在 99% 不动了？

99% 是进度条显示问题，webpackbar 和 webpack 5 的兼容还有点问题，实际已经成功了，可忽略。

Invalid key: mfsu

npx umi -v 看下，请确保是 umi@3.5.0 或以上。

Can not resolve ..., Do you mean ... 报错

e.g.

几个选择：

需要更新相关依赖到最新，因为这个版本的依赖和 webpack5 不兼容
chainWebpack 里配上 config.module.rule('mjs-rule').test(/.m?js/).resolve.set('fullySpecified', false);

国际化不生效

需更新 @umijs/preset-react 到最新，已在 @umijs/plugin-locale 0.13.0 里修复。

Module parse failed: Top-Level-Await 报错

e.g.

如果报错的是项目文件，给此文件后面加一行 export {}，声明为 esm 模块格式。

如果文件中有用动态 require 语法怎么办？

改成 await import 写法，比如：

const test = 'test';
const foo = (await import((`../${test}`))).default;

参考：#6877

开启 SSR 时报错

暂不支持。

覆盖依赖的样式不生效（比如覆盖 antd 的样式）

目前没有很好的解法，需修改代码，提升覆盖样式的优先级。

有使用 dva 插件同时效果不佳？

配置 dva: { disableModelsReExport: {} }，因为 export * from 目前尚未支持匹配到预编译。

antd 主题配置为啥失效？

如果你是用的配置 less 变量文件这种方式，切换到 theme 配置的方式，或尝试关闭 babel-plugin-import 的自动引入 less 文件功能。

Beta 阶段手把手服务群

The text was updated successfully, but these errors were encountered:

xiaohuoni · 2021-06-23T08:28:50Z

感觉需要把，自定义插件如何适配的说明补充一下 @xiefengnian

sorrycc · 2021-06-23T08:46:58Z

@xiaohuoni

不要出现 require 等 cjs 写法
依赖了包注意声明依赖

xiaohuoni · 2021-06-23T09:10:23Z

好像之前聊天有说，runtime 需要放在 .umi 目录下，我比较模糊。

realgkl · 2021-06-23T10:50:50Z

求解释，MFSU 是啥，为何缩短了 compile 的时间。

miaopeng · 2021-06-23T10:59:25Z

antd 需要升级吗？用了之后 rc-field-form 报了以下错误：

ERROR in ./node_modules/rc-field-form/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 4:0-52
Module not found: Error: Can't resolve './nonIterableSpread' in '/Users/mios/workspace/guanyun/projects/eagle/hawkeye/node_modules/rc-field-form/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableSpread.js'?
BREAKING CHANGE: The request './nonIterableSpread' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/rc-field-form/es/Field.js 3:0-78 80:44-62 80:76-94
 @ ./node_modules/rc-field-form/es/index.js 2:0-28 10:16-21 13:0-46
 @ ./node_modules/antd/es/config-provider/index.js 7:0-63 99:51-65
 @ ./node_modules/antd/es/notification/hooks/useNotification.js 5:0-55 46:65-79
 @ ./node_modules/antd/es/notification/index.js 11:0-60 235:22-43
 @ ./src/.umi/.cache/.mfsu/mf-va_antd_es_notification.js 1:0-112 2:15-16 3:0-112 3:0-112
 @ container entry ./antd/es/notification[0]

webpack compiled with 42 errors

chengluliu · 2021-06-23T13:28:15Z

assert
http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.a8693fc8.async.js:649:21
(anonymous function)
http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.a8693fc8.async.js:704:9
Plugin.register
http://localhost:8000/mf-dep_vendors-node_modules_umijs_runtime_dist_index_esm_js.a8693fc8.async.js:703:33
▲ 3 stack frames were expanded.

发现是用 postcss 引入 taiwindcss 的原因

sorrycc · 2021-06-23T14:08:32Z

@miaopeng @chengluliu 只给报错信息并不能解决你们的问题，需要复现步骤。

sorrycc · 2021-06-23T14:09:04Z

@realgkl 说来话长，得单独起一篇文章讲。

GuanyuChen · 2021-06-23T14:42:22Z

@realgkl 说来话长，得单独起一篇文章讲。

非常有想象力的技术设计，非常期待大佬出一篇文章科普一下

chengluliu · 2021-06-23T15:02:10Z

@miaopeng @chengluliu 只给报错信息并不能解决你们的问题，需要复现步骤。

我使用的是antd pro，唯一不同的地方就是用了taiwindcss, 只要打开+ mfsu: {}, umi dev之后，终端都正常，但是打开页面，就出现报错，怀疑是用了taiwindcss的问题

wangchun0020 · 2021-06-24T01:51:44Z

@xiaohuoni

不要出现 require 等 cjs 写法

依赖了包注意声明依赖

<img src={'require('/source/path')'} />
这种写法是不是也不允许？那引用图片相对还是有点麻烦了

sorrycc · 2021-06-24T03:16:14Z

@xiaohuoni

不要出现 require 等 cjs 写法

依赖了包注意声明依赖

<img src={'require('/source/path')'} />
这种写法是不是也不允许？那引用图片相对还是有点麻烦了

允许的，试试就知道了。

maxzmh · 2021-06-24T07:53:12Z

CC大佬在 ant design pro 中修改MFSU相关配置后报这个错误！！！

sorrycc · 2021-06-24T08:25:50Z

@13500Jin 给复现步骤。

maxzmh · 2021-06-24T09:06:57Z

@sorrycc > @13500Jin 给复现步骤。

在ant design pro 提供的模板项目中：

将package.json中的umi升级为^3.5.0-beta.9
在config.ts中添加MFSU相关配置

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

xiefengnian · 2021-06-24T11:54:16Z

@sorrycc > @13500Jin 给复现步骤。

在ant design pro 提供的模板项目中：

将package.json中的umi升级为^3.5.0-beta.9

在config.ts中添加MFSU相关配置

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

命令行有报错信息吗？

maxzmh · 2021-06-25T02:57:54Z

@sorrycc > @13500Jin 给复现步骤。

在ant design pro 提供的模板项目中：

将package.json中的umi升级为^3.5.0-beta.9

在config.ts中添加MFSU相关配置

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

命令行有报错信息吗？

没有

shengbeiniao · 2021-06-28T02:30:34Z

mark

IronKinoko · 2021-06-28T02:48:05Z

开启功能后，当链接上带上query后就会报错
http://localhost:5000/?userId=04516030431133186#

sengmitnick · 2021-06-28T08:59:53Z

MFSU_CACHE.json 中会生成绝对路径的Key，会导致不适用于多人协作(https://umijs.org/zh-CN/docs/mfsu#%E5%BC%80%E5%8F%91%E9%98%B6%E6%AE%B5)

{
  "deps": {
    "/Users/path/to/node_modules/umi/node_modules/@umijs/renderer-react": "3.5.0-beta.17",
    "/Users/path/to/node_modules/umi/node_modules/@umijs/runtime": "3.5.0-beta.17",
    ...
  }
  ...
}

shawncvv · 2021-06-29T07:15:00Z

@sorrycc > @13500Jin 给复现步骤。

在ant design pro 提供的模板项目中：

将package.json中的umi升级为^3.5.0-beta.9

在config.ts中添加MFSU相关配置

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

命令行有报错信息吗？

没有

有解决吗，遇到同样的报错了

henryzp · 2021-06-30T06:06:01Z

报了和楼上一样的bug。。。请问要怎么处理？

@Carreylife

henryzp · 2021-06-30T06:09:02Z

@sorrycc ，我的umi config文件大概是长这样的：

const config = defineConfig({
  routes,
  nodeModulesTransform: {
    type: 'none',
    exclude: [],
  },
  mfsu: {},
  webpack5: {},
  dynamicImport: {},
  // fastRefresh: {},
  presets: [require.resolve('@dzg/umi-preset')],
  extraBabelPlugins: [
    [
      'babel-plugin-import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
      'antd',
    ],
  ],
  devtool: isSourceMapEnabled ? 'source-map' : false,
  chainWebpack: function(config: any, { webpack }: any) {
    if (process.env.NODE_ENV === 'production') {
      config.merge({
        optimization: {
          minimize: true,
          splitChunks: {
            chunks: 'all',
            cacheGroups: {
              reactVendor: {
                test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                name: 'reactVendor',
                enforce: true,
                priority: 5,
              },
              antd: {
                test: /[\\/]node_modules[\\/](antd)[\\/]/,
                name: 'antd',
                enforce: true,
                priority: 4,
              },
              umiVendor: {
                test: /[\\/]node_modules[\\/](umi).*[\\/]/,
                name: 'umiVendor',
                enforce: true,
                priority: 3,
              },
              // dzgVendors: {
              //   name: 'dzgVendors',
              //   enforce: true,
              //   priority: 2,
              //   test: /[\\/]node_modules[\\/](@dzg)[\\/]/,
              // },
              vendors: {
                name: 'vendors',
                enforce: true,
                priority: 1,
                test: /[\\/]node_modules[\\/]((?!(@dzg|antd|react|react-dom|umi)).*)[\\/]/,
              },
              default: {
                test: /[\\/]src[\\/]((?!(pages)).*)[\\/]/,
                name: 'default',
                enforce: true,
              },
            },
          },
        },
      });
      if (process.env.SENTRY === 'on') {
        config.plugin('SentryPlugin').use(SentryPlugin, [
          {
            include: './dist',
            release: packageJSON.version,
            configFile: 'sentry.properties',
            urlPrefix: `~/${packageJSON.name}/`,
            rewrite: true,
          },
        ]);
      }
    }
  },
  antd: {},
  title: 'dzg-tms-front',

  locale: {
    antd: true,
    default: 'zh-CN',
    baseNavigator: true,
  },
  chunks:
    process.env.NODE_ENV === 'production'
      ? [
          'reactVendor',
          'antd',
          'umiVendor',
          // 'dzgVendors',
          'vendors',
          'default',
          'umi',
        ]
      : ['umi'],
  history: { type: 'hash' },
  hash: true,
  publicPath: '/new-front/',
  proxy,
  ignoreMomentLocale: true,
  copy: ['static'],
  theme: theme,
  mountElementId: 'dzg-tms-front',
});

export default config;

wen-haoming · 2021-06-30T06:18:18Z

刚刚升级了 v3.5 后出现了，useModel 使用不了

jayguojianhai · 2021-06-30T07:26:05Z

命令行没有报错，页面报错

Pszz · 2021-06-30T08:07:54Z

antd-pro 升级之后，首次运行报错。
// config/config.ts 增加 mfsu:{} 后

// config/config.dev.ts 增加 mfsu:{} 后

charlzyx · 2021-06-30T08:14:08Z

@sorrycc development 环境下 publichPath 会导致类似的错误出现, 这里有个 mini 复现
项目是 yarn create @umijs/umi-app 创建出来的

mini复现 https://github.com/charlzyx/bug-report-umi-mfsu-mini

.umirc.ts

import { defineConfig } from 'umi';

export default defineConfig({
+ base: '/app',
+ publicPath: '/app/',
+ webpack5: {},
+ mfsu: {},
+ dynamicImport: {},
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

如何修正

NODE_ENV=development 的时候, 不设置 publicPath (未测试)

可能的修复方法

但是了解的不够深入, 不知道影响范围, 只能抛个砖

getMfsuPath

addBeforeMiddlewares

# L39
export const getMfsuPath = (api: IApi, { mode }: { mode: TMode }) => {
  if (mode === 'development') {
    const configPath = api.userConfig.mfsu?.development?.output;
+   // 形如 /app/ 这样的 publicPath, 需要修正一下输出路径
+   const publicPath = /^\/.*\/$/.test(api.config.publicPath) ?api.config.publicPath : '';
    return configPath
-     ? join(api.cwd, configPath)
-     : join(api.paths.absTmpPath!, '.cache', '.mfsu');
+     ? join(api.cwd, configPath, publicPath)
+     : join(api.paths.absTmpPath!, '.cache', '.mfsu', publicPath);

  } else {
+   // 生产环境不知道怎么处理
    const configPath = api.userConfig.mfsu?.production?.output;
    return configPath
      ? join(api.cwd, configPath)
      : join(api.cwd, './.mfsu-production');
  }
};
# L238
api.addBeforeMiddlewares(() => {
  return (req, res, next) => {
-   const { pathname } = url.parse(req.url);
+   const { pathname: originPathName } = url.parse(req.url);
+   // 形如 /app/ 这样的 publicPath, 需要修正一下输出路径
+   const publicPath = /^\/.*\/$/.test(api.config.publicPath) ?api.config.publicPath : '';
+   const pathname = originPathName.replace(publicPath, '');
+   // 没有后缀的请求, 不做处理
+   const noExtnameMaybeDir = !!require('path').extname(pathname);
    if (
+     noExtnameMaybeDir ||
      !api.userConfig.mfsu ||
      pathname === '/' ||
      !existsSync(
        join(getMfsuPath(api, { mode: 'development' }), '.' + pathname),
      )
    ) {
      next();
    } else {
      const value = readFileSync(
        join(getMfsuPath(api, { mode: 'development' }), '.' + pathname),
        'utf-8',
      );
      res.setHeader('content-type', mime.lookup(parse(pathname || '').ext));
      // 排除入口文件，因为 hash 是入口文件控制的
      if (!/remoteEntry.js/.test(req.url)) {
        res.setHeader('cache-control', 'max-age=31536000,immutable');
      }
      res.send(value);
    }
  };
});

rangyf · 2021-06-30T08:39:43Z

神奇，antd-pro的项目，从umi 3.4.1升上来，国际化locale就全挂了，其他倒是好像都没问题……

feibi · 2021-06-30T09:18:45Z

神奇，antd-pro的项目，从umi 3.4.1升上来，国际化locale就全挂了，其他倒是好像都没问题……

需要升级@umijs/preset-react

alexsunxl · 2021-06-30T12:05:08Z

命令行没出错，
但console里出现这个错误的。目测是devServer和mfsu的冲突问题。

devServer 没认出来 http://localhost:8000/admin/mf-va_remoteEntry.js这个链接，直接返回了index.html的内容

只是定位到错误，具体哪里改，还正在看。

henryzp · 2021-06-30T13:32:19Z

@charlzyx 测试了一下，确实是publicPath引起的问题

cemremengu · 2021-06-30T14:11:15Z

Tested, seems to break css rendering of the page.

dxhuii · 2021-06-30T18:44:43Z

什么时候完美支持SSR，现在好像还不支持。

hanwenbo · 2021-07-01T03:21:11Z

用了dva能编译成功，但是访问用了connect的页面都会报错，偶尔第二次人更新后会正常，再刷新依然会报错，我怀疑models渲染的时候都没加载进来

BoWang816 · 2021-07-01T03:24:42Z

我的好像报了奇怪的错误
Cannot read property 'ModuleFederationPlugin' of undefined

alexsunxl · 2021-07-01T04:30:19Z

我的好像报了奇怪的错误
Cannot read property 'ModuleFederationPlugin' of undefined

你这个应该是umi内部没启用webpack5成功，用了webpack4的。你配置是写在哪里的？

BoWang816 · 2021-07-01T06:14:15Z

我的好像报了奇怪的错误
Cannot read property 'ModuleFederationPlugin' of undefined

你这个应该是umi内部没启用webpack5成功，用了webpack4的。你配置是写在哪里的？

写在了config.dev.ts里面的

sorrycc · 2021-07-01T06:27:58Z

不支持 config.dev.ts，写 config.ts 里。

sorrycc · 2021-07-01T06:28:31Z

大家单独提 ISSUE 吧，这个 ISSUE 太长了，不方便回复和跟踪。

sorrycc pinned this issue Jun 23, 2021

umijs deleted a comment from xiaohuoni Jun 23, 2021

sorrycc mentioned this issue Jun 24, 2021

fix: mfsu don't work with externals config #6772

Merged

4 tasks

sorrycc added the type(mfsu) label Jun 24, 2021

sorrycc changed the title ~~MFSU 功能征集使用和测试反馈~~ MFSU Why、What、How and FAQ Jun 30, 2021

umijs locked as too heated and limited conversation to collaborators Jul 1, 2021

sorrycc unpinned this issue Jun 24, 2022

sorrycc closed this as completed Jul 4, 2022

MFSU Why、What、How and FAQ #6766

MFSU Why、What、How and FAQ #6766

Comments

sorrycc commented Jun 23, 2021 • edited Loading

Why?

什么是 MFSU？

启用方式

FAQ

卡在 99% 不动了？

Invalid key: mfsu

Can not resolve ..., Do you mean ... 报错

国际化不生效

Module parse failed: Top-Level-Await 报错

如果文件中有用动态 require 语法怎么办？

开启 SSR 时报错

覆盖依赖的样式不生效（比如覆盖 antd 的样式）

有使用 dva 插件同时效果不佳？

antd 主题配置为啥失效？

Beta 阶段手把手服务群

xiaohuoni commented Jun 23, 2021

sorrycc commented Jun 23, 2021 • edited Loading

xiaohuoni commented Jun 23, 2021

realgkl commented Jun 23, 2021

miaopeng commented Jun 23, 2021

chengluliu commented Jun 23, 2021 • edited Loading

sorrycc commented Jun 23, 2021

sorrycc commented Jun 23, 2021

GuanyuChen commented Jun 23, 2021

chengluliu commented Jun 23, 2021

wangchun0020 commented Jun 24, 2021

sorrycc commented Jun 24, 2021

maxzmh commented Jun 24, 2021 • edited Loading

CC大佬 在 ant design pro 中修改MFSU相关配置后报这个错误！！！

sorrycc commented Jun 24, 2021

maxzmh commented Jun 24, 2021 • edited Loading

在ant design pro 提供的 模板项目中：

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后 访问页面还是报错！！！！

xiefengnian commented Jun 24, 2021

在ant design pro 提供的 模板项目中：

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后 访问页面还是报错！！！！

maxzmh commented Jun 25, 2021

在ant design pro 提供的 模板项目中：

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后 访问页面还是报错！！！！

没有

shengbeiniao commented Jun 28, 2021

IronKinoko commented Jun 28, 2021

sengmitnick commented Jun 28, 2021

shawncvv commented Jun 29, 2021

在ant design pro 提供的 模板项目中：

模板项目长这样

启动项目后，打开项目就会报错！！！

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后 访问页面还是报错！！！！

没有

henryzp commented Jun 30, 2021

henryzp commented Jun 30, 2021

wen-haoming commented Jun 30, 2021

jayguojianhai commented Jun 30, 2021

Pszz commented Jun 30, 2021 • edited Loading

charlzyx commented Jun 30, 2021 • edited Loading

.umirc.ts

如何修正

可能的修复方法

rangyf commented Jun 30, 2021 • edited Loading

feibi commented Jun 30, 2021

alexsunxl commented Jun 30, 2021 • edited Loading

henryzp commented Jun 30, 2021

cemremengu commented Jun 30, 2021

dxhuii commented Jun 30, 2021

hanwenbo commented Jul 1, 2021

BoWang816 commented Jul 1, 2021 • edited Loading

alexsunxl commented Jul 1, 2021

BoWang816 commented Jul 1, 2021

sorrycc commented Jul 1, 2021

sorrycc commented Jul 1, 2021

sorrycc commented Jun 23, 2021 •

edited

Loading

sorrycc commented Jun 23, 2021 •

edited

Loading

chengluliu commented Jun 23, 2021 •

edited

Loading

maxzmh commented Jun 24, 2021 •

edited

Loading

CC大佬在 ant design pro 中修改MFSU相关配置后报这个错误！！！

maxzmh commented Jun 24, 2021 •

edited

Loading

在ant design pro 提供的模板项目中：

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

在ant design pro 提供的模板项目中：

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

在ant design pro 提供的模板项目中：

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

在ant design pro 提供的模板项目中：

另外：多次尝试删除 node_modules 以及 .umi 目录并重启项目后访问页面还是报错！！！！

Pszz commented Jun 30, 2021 •

edited

Loading

charlzyx commented Jun 30, 2021 •

edited

Loading

rangyf commented Jun 30, 2021 •

edited

Loading

alexsunxl commented Jun 30, 2021 •

edited

Loading

BoWang816 commented Jul 1, 2021 •

edited

Loading