docs/docs/docs/introduce/faq.md
可以，但不建议关闭。
1、安装依赖
pnpm i babel-plugin-dynamic-import-node -D
2、配置里加上 extraBabelPlugins ，但只针对 production 开启
// .umirc.ts
export default {
extraBabelPlugins: process.env.NODE_ENV === 'production'
? ['babel-plugin-dynamic-import-node']
: []
}
定义 src/loading.tsx :
由于 umi v4 升级了默认的 react 版本到 v18，使用 umi4 时注意下依赖库和 react 18 的兼容情况，如果还需要使用 react 17，请执行以下命令并重启。
pnpm add react@^17 react-dom@^17
解法：配置 SOCKET_SERVER=127.0.0.1:${port} 启动项目
SOCKET_SERVER=http://127.0.0.1:8000 pnpm dev
round: argument must be a number解法：新版 less 中 / 默认被识别为属性简写，通过配置 lessLoader: { math: 'always' } 恢复旧版行为（默认将 / 用作计算符号）。
layout 配置被移动到了 app.ts ，详见 runtime-config > layout
除了可以通过 配置项 注入外部 script 、css 外，还可以使用项目级插件更灵活的修改 HTML 产物，参见：issuecomment-1151088426
react 只有在页面加载完毕后才会开始运行，所以插到 umi.js 后面不会影响项目。
若需要插到 umi.js 前面，可参见 issuecomment-1176960539
Umi 4 默认按页拆包，如果你觉得还需要优化，可以使用分包策略或手动拆包，详见：代码拆分指南
如果你有将所有 js 产物打包成单 umi.js 文件的需求，请关闭 dynamicImport 。
Umi 4 使用 react-router v6 ，通过 <Outlet /> 展示嵌套路由内容，可参见：issuecomment-1206194329
配置 graph-ql loader 的方式可参见： discussions/8218
配置如下：
// .umirc.ts
export default {
chainWebpack(config) {
config.set('experiments', {
...config.get('experiments'),
asyncWebAssembly: true
})
const REG = /\.wasm$/
config.module.rule('asset').exclude.add(REG).end();
config.module
.rule('wasm')
.test(REG)
.exclude.add(/node_modules/)
.end()
.type('webassembly/async')
.end()
},
}
一个实际例子可参见：discussions/8541
根据场景不同，你可能要先从 静态资源规则 中排除你需要加载的文件类型，再添加你自己的 loader / 或修改，可参考如下实例：
直接将第三方包的 jsx / ts / tsx 源码发布到 npm ，无需转译为 js Umi 4 支持直接使用。
若第三方包产物是 js 的情况，需要将其纳入 babel 额外处理，才可以支持 css modules：
// .umirc.ts
export default {
extraBabelIncludes: ['your-pkg-name']
}
Umi 4 默认开启 mfsu ，默认忽略 node_modules 的变化，配置从 mfsu 排除该包即可：
// .umirc.ts
export default {
mfsu: {
exclude: ['package-name']
},
}
加载优先级详见 UMI_ENV ，无论是 config/config.ts 还是 .umirc.ts 同理。
现代浏览器主流背景下，Umi 4 默认不兼容 IE 。
若你有调整构建兼容目标、兼容非现代浏览器、兼容 IE 浏览器的需求，请参考 非现代浏览器兼容 。
SSR 目前还处于实验性特性，不建议在生产环境使用，若发现问题可即时在 issue 反馈。
Umi 4 新增了 Vite 模式和 Vue 支持，可能存在 edge case ，若发现问题可即时在 issue 反馈。
history 中取的 pathname 为什么和 useLocation 中的不一样这种情况是在项目配置了 base 。 history.location.pathname 取到的值是浏览器地址中的 pathname，它是包含 base 的；而路由相关 hooks 取到的值是前端路由定义中的 pathname，它是不包含 base 的。参考。
默认 js / css 的压缩器 esbuild 会采用 ascii 格式编码压缩，这可能导致中文字符被转码，增大产物体积。
可通过配置调整到 utf8 编码，防止字符被转换：
// .umirc.ts
export default {
jsMinifierOptions: { charset: 'utf8' },
cssMinifierOptions: { charset: 'utf8' }
}
或通过切换压缩器来解决：
// .umirc.ts
export default {
jsMinifier: 'terser',
cssMinifier: 'cssnano'
}
Umi 4 不再支持配置 devServer 选项，但你可以通过以下方式找到替代：