[discussion] 常见的一些faq 收集

[xierenyuan]

收集一些 答疑中经常被开发者问的一些问题

举例

可以关闭 dynamicImport 吗？

可以，但不建议关闭。
1、安装依赖

pnpm i babel-plugin-dynamic-import-node -D

2、配置里加上 extraBabelPlugins，但只针对 production 开启

extraBabelPlugins: process.env.NODE_ENV === 'production' ? [
  'babel-plugin-dynamic-import-node'
] : []

[fz6m]

routes 里的 layout 配置选项不生效

layout 配置被移动到了 app.ts ，详见 runtime-config > layout

dynamicImport 去哪了

umi4 默认按页拆包，该行为近似等同于以前的 dynamicImport ，通过 src/loading.tsx 定义加载动画，详见 目录结构 > loading.tsx 。

如果需要关闭，可以参见这里：#8578 。该行为会导致产物不被拆包优化非常庞大，且存在边界场景无法处理（如和 wasm 一起使用时）。

document.ejs 去哪了，如何自定义 HTML 模板

除了可以通过 配置项 注入外部 script 、css 外，还可以使用项目级插件更灵活的修改 HTML 产物，参见：umijs/umi-next#868 (comment)

scripts 里配置的外部 js 文件为什么默认插入到 umi.js 的后面

react 只有在页面加载完毕后才会开始运行，所以插到 umi.js 后面不会影响项目。

若需要插到 umi.js 前面，可参见 #8442 (comment)

umi4 我怎么分包

umi4 默认按页拆包，默认情况无需手动分包，如果你觉得还需要优化，可以手动拆的更细，详见：#8513

如果你有将所有 js 产物打包成单 umi.js 文件的需求，请使用 cacheGroups 。

_layout.tsx 去哪了，我怎么嵌套路由

umi4 使用 react-router v6 ，通过 <Outlet /> 展示嵌套路由内容，可参见：#8850 (comment)

怎么用 GraphQL

配置 graph-ql loader 的方式可参见： #8218

怎么用 WebAssembly

借助 webpack5 的原生 wasm 加载特性，需要针对 wasm 配置，一个实例可参见：#8541

怎么自定义 loader

根据场景不同，你可能要先从 静态资源规则 中排除你需要加载的文件类型，再添加你自己的 loader / 或修改，可参考：

• chainWebpack：请问如何自定义Loader, 代码如下： #8218

• umi4，font文件无法被转换成base64 #8452

第三方包里如何使用 css modules

1. 直接将第三方包的 jsx / ts / tsx 源码发布到 npm ，无需转译为 js ，umi4 支持直接使用。

2. 若第三方包产物是 js 的情况，需要将其纳入 babel 额外处理，才可以支持 css modules：

// .umirc.ts
export default {
  extraBabelIncludes: ['your-pkg-name']
}

我的环境很多，多环境 config 文件的优先级是怎样的

加载优先级详见 #8341

IE 兼容性问题

IE 被淘汰，现代浏览器主流背景下，umi4 默认不兼容 IE ，在 这里 可以参与相关讨论。

若你需要兼容 es5 ，目前的缓解方法是：

低浏览器相关的兼容，可以使用配置 legacy
有其他异常欢迎新开 issues 讨论

SSR 问题

ssr 目前还出于实验性特性，不建议在生产环境使用，若发现问题可即时在 issue 反馈。

Vue / Vite 问题

umi4 新增了 vite 模式和 vue 支持，可能存在 edge case ，若发现问题可即时在 issue 反馈。

[YdreamW]

umi max request 不能正常修改 Content-Type

如果是 get 类型的请求，要加一个 data: {} 。 post 类型请求因为本来就会有 data ，所以不用处理。通过添加空 data 可以让覆写 Content-Type 生效。
详见 axios/axios#89

[sorrycc]

后续内容可以直接 PR 改文档。

[drizzlesconsin]

@refresh reset

@sorrycc @fz6m 请问下 v4 不支持 // @refresh reset 了吗？
https://v3.umijs.org/docs/fast-refresh#%E9%99%90%E5%88%B6

暂时不加函数名可用

[JamieMing]

cssModulesTypescriptLoader自动生成css类型文件的功能在umi4是被移除了么？

[fz6m]

用 vscode 插件吧，会自动提示，无需生成。

• https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks-style-helper

• https://marketplace.visualstudio.com/items?itemName=clinyong.vscode-css-modules

[kyo4311]

dynamicImport 本地是不是也能开启，这样子将线上的js和css代理到本地的时候方便调试。

[Yang-yibu]

原来umi3的 <%= publicPath %> 获取最终的静态资源地址，现在去掉 document.ejs 后，如何在 headScript 中获取设置 public 下的资源地址