Umi: [Umi 3] 关于引入 useLocation 后开发与生产环境样式不一致的疑问

[JophielZX]

What happens?

问题：项目中使用了 Umi3，尝试从 umi 中引入 useLocation 并在组件中使用后，发现，在开发环境中，会自动引入 webpack:///./node_modules/antd/es/style/index.less，同一代码在生产环境中，是不会引入的，存在样式差异。

• 开发环境：
  
• 生产环境：
  

困惑：不确定这是 feature 还是 bug，或者是本人使用方式不对，求解惑，很喜欢 Umi，非常感谢。

最小可复现仓库

请使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

https://github.com/JophielZX/umi3-demo

复现步骤，错误日志以及相关配置

1. 使用 yarn create @umijs/umi-app 初始化项目

2. 修改 src/pages/index.tsx 文件，如下：

   import React from 'react';
   import { useLocation } from 'umi';
   import styles from './index.less';
   
   export default () => {
     const { pathname } = useLocation();
   
     return (
       <div>
         <h1 className={styles.title}>Page index</h1>
         <div>pathname: {pathname}</div>
       </div>
     );
   };
   

3. 执行 yarn start 查看开发环境样式

4. 执行 yarn build，而后 serve dist，查看生产环境样式

相关环境信息

• Yarn 版本：1.22.4
• Umi 版本：3.0.11
• Node 版本：v12.16.1
• 操作系统：Win10

[leftstick]

问题出在了plugin-request，它里面依赖了 antd，在 request.ts#L18

也就是说，只要你在页面上从 umi 里引入任意一个变量/组件，都会连带着把plugin-request 自动引入。然后 antd的样式也就进来了。（这是指的开发环境）

最终打包的时候，会对结果做treeshaking，没有实际用到plugin-request内容的引入会被剔除。

大致应该就是这个样子了。

其他还请 @sorrycc 补充，看是否需要修正这个问题

[JophielZX]

@leftstick 感谢解答❤。

也就是说，如果项目中不使用 antd，但又引入了 Umi 的变量或组件，就会出现这个情况。

这在不需要使用组件库的情况下，自动引入 antd 样式可能还是会对普通样式编写造成一些困扰。

[leftstick]

这个是目前 webpack 的打包策略所致，严格意义上说并不是bug，是设计如此。dev 和 prod 编译不一样。prod 编译才会做 treeshaking。

因为你用了@umijs/preset-react，看官网介绍就知道，它是一大堆插件的集合。而你示例中的问题就在于 plugin-antd和plugin-request都被安装并由 umi 导出了，这就是为什么只要你一引入 umi 就会出现 antd 的样式。

但你又没有直接使用，所以 prod 编译时 经由 treeshaking，就从最终 bundle 里被删除了。

我的建议是，要么，这个问题你可以忽略（我知道调试时样式不一致会很麻烦）。

要么，你就不要用 @umijs/preset-react，需要哪个插件，安装哪个插件就好。

[JophielZX]

@leftstick 经过大佬点拨，我刚刚重新去官网看了 @umijs/preset-react 的文档，并在脚手架项目中找到了相应的依赖项，

"dependencies": {
  "@umijs/preset-react": "1.x"
}

尝试删除后问题解决。

确实如大佬所说，根据我的需求，不使用 @umijs/preset-react，而是根据需要安装插件是更合理的方案。

我之前一直在找不自动引入 antd 样式的方法，也去官网看了 @umijs/plugin-antd 的文档，始终没找到原因。

原来是在 @umijs/preset-react 中集成了相关插件，是我看文档不够仔细，惭愧。

感谢大佬耐心解答❤。

[leftstick]

客气