Ant-design-pro: 页面无法展示图表了

[afc163]

https://preview.pro.ant.design/dashboard/analysis

[afc163]

ping @chenshuai2144

[chenshuai2144]

详细定位了一下问题。
umi 会拆分路由，切换路由的时候会动态的加载 css 和 js。一般情况下是没有问题的，css 比较小，css 肯定会首先加载回来，g2去算高端和宽度是没有问题的
但是在 pwa 的情况下，css 和 js 都是走的缓存，都是 0s 加载 g2 就会拿不到宽度。

解决办法

• [ ] 增加一个loading，延迟 g2 的执行。
• [ ] 更改 umi 的加载方式，css 加载完成之后再进行 js 的加载，或者将 css 全部打包在一个 css 中。

[chenshuai2144]

增加一个 loading，治标不治本。最好的还是 umi 可以解决。

[afc163]

@sorrycc 帮忙看看解决方案？

[chenshuai2144]

增加 loading 的效果，至少需要 2s，1s 有时候会出现问题

https://5cbeb62db7c6b10008733bf4--ant-design-pro.netlify.com/dashboard/analysis

[sorrycc]

所以是 pwa 情况下的问题吗？

[chenshuai2144]

一般不会出现的，这是一种极端情况. g2 这种依赖 css 的包也比较少见。

[sorrycc]

试试这么配，把所有的 css 提出来。（用了 less 记得改正则）

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

[afc163]

感觉给 g2 加统一的渲染更靠谱，调试环节也经常有 css 未加载导致图表 size 不对的问题。

[chenshuai2144]

@sorrycc 可以在css加载完成之后出发一下 resize 事件吗？

[afc163]

Try https://github.com/que-etc/resize-observer-polyfill

[chenshuai2144]

https://github.com/alibaba/BizCharts/pull/807
已合并