Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FAQ #1421

Closed
sorrycc opened this issue Nov 7, 2018 · 27 comments · Fixed by #5044
Closed

FAQ #1421

sorrycc opened this issue Nov 7, 2018 · 27 comments · Fixed by #5044
Labels

Comments

@sorrycc
Copy link
Member

@sorrycc sorrycc commented Nov 7, 2018

整理日常咨询常被问到的问题,欢迎补充。

开启按需加载后如何把 css 打包成一个文件?

配置 splitChunks,比如:

export default {
  plugins: [
    ['umi-plugin-react', {
      dynamicImport: {
        webpackChunkName: true,
      },
    }],
  ],
  chainWebpack(config) {
    config.optimization.splitChunks({
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(css|less)$/,
          chunks: 'async',
          minChunks: 1,
          minSize: 0,
        }
      },
    });
  },
}

打包后会输出:

File sizes after gzip:

  126.85 KB  dist/umi.js
  535 B      dist/p__users.async.js
  533 B      dist/p__index.async.js
  337 B      dist/styles.async.js
  96 B       dist/styles.chunk.css

示例:

参考:

@sorrycc sorrycc added the FAQ label Nov 7, 2018
@xiaohuoni
Copy link
Member

@xiaohuoni xiaohuoni commented Nov 7, 2018

proxy代理不成功,没有代理到实际地址

image

代理只是服务请求代理,这个地址是不会变的。
原理可以简单的理解为,在本地启了一个服务,你先请求了本地的服务,本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是http://localhost:8000/xxx 。以服务端是否收到请求为准

ant-design/ant-design-pro#2779

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Nov 7, 2018

CLEAN

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Nov 12, 2018

配了 dynamicImport.loadingComponent 后外层报错不生效怎么办?

组件报错有两种形式:

a(); // 出错
export default () => <>..</>;
export default () => {
  a(); // 出错
  return <>..</>;
}

第二种不管怎么样都能正常抛错,第一种在开启 dynamicImport 并配置了 loadingComponent 时可能会不生效。

比如 loadingComponent 指向的文件内容为:

export default () => <>loading...</>

那么出错时也会只显示 loading... 。

解决

loadingComponent 处理出错场景,比如:

export default class extends React.PureComponent {
  render() {
    if (process.env.NODE_ENV === 'development' && this.props.error) {
      console.error(this.props.error.stack);
      return <div>{this.props.error.stack}</div>;
    }
    return <div>loading...</div>;
  }
};

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Nov 12, 2018

umi dev 之后页面一直在不停地刷新怎么办?

这是因为 html 和 umi.js 的端口不一致。

比如:

  • html 在 7001 端口
  • umi.js 在 8000 端口

然后你访问 html,并且在 html 里引用了 8000 端口的 umi.js,这样会导致 socket server 连接出错,触发了循环刷新问题。

解决

配置 SOCKET_SERVER 到 umi dev 所在端口,比如 SOCKET_SERVER=8000 umi dev。(windows 下是 set SOCKET_SERVER=8000&&umi dev`)

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Nov 13, 2018

如何禁用掉每次刷新路由时出现的 loading... 状态?

解决

给 dynamicImport 配置加上 loadingComponent: '() => <></>',比如:

export default {
  plugins: [
    ['umi-plugin-react', {
      dynamicImport: { loadingComponent: '() => <></>' },
    }],
  ]
}

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Nov 13, 2018

antd-pro 项目热更新慢并且是在 95% (emitting) 时卡住怎么办?

编辑 config/config.js,搜索 chainWebpack 并注释掉。

@fangzhengL

This comment has been minimized.

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Dec 7, 2018

如何配置额外的 loader

需同时配置 urlLoaderExcludes,比如 md 用 raw-loader 的配置,

export default {
  urlLoaderExcludes: [
    /\.md$/,
  ],
  chainWebpack(config) {
    config.module.rule('md')
      .test(/\.md$/)
      .use('raw')
      .loader('raw-loader')
  }
}

@sorrycc
Copy link
Member Author

@sorrycc sorrycc commented Feb 11, 2019

layout 路由如何传值给子路由

推荐用 context 或者数据流方案,如果用 cloneElement 传值需要传两级,因为第一级是 Switch,然后才是 Route。

React.Children.map(children, child => {
  return React.cloneElement(child, null, React.Children.map(child.props.children, child => {
    return React.cloneElement(child, { test: 'test' });
  }));
})

参考:

@tsaiDavid
Copy link

@tsaiDavid tsaiDavid commented Feb 20, 2019

antd-pro 项目热更新慢并且是在 95% (emitting) 时卡住怎么办?

编辑 config/config.js,搜索 chainWebpack 并注释掉。

If the compilation is slow or gets stuck at 95%, go to config/config.js and then comment out chainWebpack.

@stale
Copy link

@stale stale bot commented May 24, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label May 24, 2019
@sorrycc sorrycc removed the wontfix label May 24, 2019
@boogoogle

This comment has been minimized.

@hughfenghen
Copy link

@hughfenghen hughfenghen commented Jun 21, 2019

如何配置额外的 loader

需同时配置 urlLoaderExcludes,比如 md 用 raw-loader 的配置,

export default {
  urlLoaderExcludes: [
    /\.md$/,
  ],
  chainWebpack(config) {
    config.module.rule('md')
      .test(/\.md$/)
      .use('raw')
      .loader('raw-loader')
  }
}

我在文档中找不到相关描述,请教一下如何配置rules的enforce,例如与下面的webpack配置等价的配置方法:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
};

@hughfenghen
Copy link

@hughfenghen hughfenghen commented Jun 21, 2019

我在仓库源码中找到一条配置作为参考:

但是并没有生效,仍然看不到sourcemap:

  config.module.rule('source-map-loader')
    .test(/\.js$/)
    .enforce('pre')
    .use('source-map-loader')
    .loader('source-map-loader')

@stale
Copy link

@stale stale bot commented Oct 21, 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@Hugo-seth
Copy link

@Hugo-seth Hugo-seth commented Nov 12, 2019

umi 好像不支持 react.lazy,如果支持的话,怎样把 lazy 的组件单独打包成 async 的包?

@sxyshirly
Copy link

@sxyshirly sxyshirly commented Dec 4, 2019

有一个IE9以下浏览器没有获取到css样式的问题,项目用的umi+dva+antd,配置了按需加载。查找了一下打包完的dist文件夹,发现一个vendors.chunk.css文件,好像是antd库的打包。不知道是不是因为它有300多kb所以ie9无法读取,想请问一下:
1.umi-plugin-react这个插件下 的chunk项配置是什么意思,是否是用于css切割的
2.css-split-webpack-plugin这个插件如何在umi项目中使用
打包这部分不是很熟悉,半天没解决这个问题,希望赐教

@stale
Copy link

@stale stale bot commented Feb 2, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Feb 2, 2020
@xiaohuoni xiaohuoni removed the wontfix label Feb 3, 2020
@dickeylth
Copy link
Contributor

@dickeylth dickeylth commented Feb 22, 2020

如何声明路由参数类型?https://github.com/umijs/umi/issues/3983,路由参数捕获声明类型遇到问题,参照 react-router 的文档 也没有解决

@Tenodec
Copy link

@Tenodec Tenodec commented Feb 28, 2020

ant design 4.0 发布了,umi create 创建的 pro项目模板啥时候更新下啊

@shengbeiniao
Copy link

@shengbeiniao shengbeiniao commented Mar 10, 2020

我在仓库源码中找到一条配置作为参考:

但是并没有生效,仍然看不到sourcemap:

  config.module.rule('source-map-loader')
    .test(/\.js$/)
    .enforce('pre')
    .use('source-map-loader')
    .loader('source-map-loader')

同样的问题,因为 umi 的依赖包比如 dva 是通过 father 编译的,本来就不带 sourcemap,编译的时候像 react-redux 这种库并没有编译进去

@cpocar
Copy link

@cpocar cpocar commented Mar 30, 2020

基于@umijs/plugin-layout 的侧边栏菜单配置中的icon是否能支持本地图片或者svg?,如果使用antd的icon打包下来的icon贼大。

umi@3.016

image

@llh1187
Copy link

@llh1187 llh1187 commented Mar 30, 2020

基于@umijs/plugin-layout 的侧边栏菜单配置中的icon是否能支持本地图片或者svg?,如果使用antd的icon打包下来的icon贼大。

umi@3.016

image

我记得哪里看到说是可以按需加载?

@sorrycc sorrycc closed this as completed Mar 31, 2020
@xiaohuoni xiaohuoni unpinned this issue Mar 31, 2020
@afc163
Copy link
Contributor

@afc163 afc163 commented Jul 15, 2020

@xiaohuoni 这里的问题整理到 https://umijs.org/zh-CN/docs/faq 吧。

@xiaohuoni xiaohuoni mentioned this issue Jul 16, 2020
4 tasks
@tushuang
Copy link

@tushuang tushuang commented Dec 31, 2020

有群地址吗

@xiaohuoni
Copy link
Member

@xiaohuoni xiaohuoni commented Jan 13, 2021

有群地址吗

首页,底部 https://umijs.org/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.