🧐[问题] fastRefresh不生效，必须关闭mfsu，才有效果

[zhaosigui]

🧐 问题描述 | Problem description

1、主动修改代码，浏览器没有刷新视图，必须关闭mfsu视图会自动刷新
2、控制台有WebSocket连接失效，在第一次修改代码时有，对应热更新请求，但不刷新视图，第二次修改代码，就不会在有热更新请求，没有请求umi.hash.hot-update.json、umi.hash.hot-update.js、p_页面组件.hot-update.js

💻 示例代码 | Sample code

版本：
dependencies：
"umi": "^3.5.21",
"umi-serve": "^1.9.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"umi": "^3.5.21",
"umi-serve": "^1.9.10",
devDependencies：
"@ant-design/pro-cli": "^2.0.2",
"@umijs/fabric": "^2.6.2",
"@umijs/openapi": "^1.1.14",
"@umijs/plugin-blocks": "^2.0.5",
"@umijs/plugin-esbuild": "^1.0.1",
"@umijs/plugin-openapi": "^1.2.0",
"@umijs/preset-ant-design-pro": "^1.2.0",
"@umijs/preset-react": "^1.8.17",
"@umijs/yorkie": "^2.0.3",

config.ts
export default defineConfig({
hash: true,
antd: {},
dva: {
hmr: true,
},
layout: {
// https://umijs.org/zh-CN/plugins/plugin-layout
locale: false,
siderWidth: 208,
...defaultSettings,
},
dynamicImport: {
loading: '@ant-design/pro-layout/es/PageLoading',
},
targets: {
ie: 11,
},
// umi routes: https://umijs.org/docs/routing
routes: routes,
// Theme for antd: https://ant.design/docs/react/customize-theme-cn
theme: {
'primary-color': defaultSettings.primaryColor,
},
// esbuild is father build tools
// https://umijs.org/plugins/plugin-esbuild
esbuild: {},
title: false,
ignoreMomentLocale: true,
proxy: proxy[REACT_APP_ENV || 'dev'],
manifest: {
basePath: '/',
},
// Fast Refresh 热更新
fastRefresh: {},
nodeModulesTransform: {
type: 'none',
},
mfsu: {},
webpack5: {},
exportStatic: {},
lessLoader: {
// golbalVars: {
// 'root-entry-name': 'default'
// }
modifyVars: {
'root-entry-name': 'default'
}
},
});

🚑 其他信息 | Other information

控制台：

network：

自己试过将项目的packjson，复制到最新@ant-design/pro-cli创建的项目umi3，全量脚手架项目，并覆盖demo的packjson，启动demo，发现demo 项目可以进行热更新。

OS:

Node：v16.19.1

浏览器 | browser：chrome 114.0.5735.199（正式版本） （64 位）

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🧐[问题] fastRefresh不生效，必须关闭mfsu，才有效果 #10843][100%]

[chenshuai2144]

根据你提供的信息，问题可能是由于MFSU导致的热更新不生效。MFSU是一种基于webpack5的新特性Module Federation的打包提速方案。它的核心思想是将应用源代码的编译和应用所依赖的编译分开，将变动较小的应用依赖构建为一个Module Federation的远程应用，以避免对依赖的编译和热更新。

默认情况下，Umi项目开启了MFSU功能来大幅减少热更新所需的时间。但是根据你的描述，你可能遇到了MFSU导致的热更新不生效的问题。

一种解决办法是关闭MFSU，这样热更新就能够正常生效。你可以在配置文件config.ts中设置mfsu: false来关闭MFSU功能。

另外，你也可以尝试将项目的package.json复制到最新版本的@ant-design/pro-cli创建的UMI3项目中，覆盖示例项目的package.json，然后启动示例项目，看看是否可以进行热更新。

希望这些信息能够帮助你解决问题！如果还有其他问题，请随时提问。