alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
https://ice.work
MIT License
17.8k stars 2.09k forks source link

开启懒加载会报loading chunk failed #6867

Closed Sharang-heng closed 2 months ago

Sharang-heng commented 2 months ago

Describe the bug

部署到正式环境之后,偶尔会出现下面的错误,刷新就没事了,感觉应用本身没啥问题,怀疑是部署之后浏览器还是请求旧的chunk导致报错 img_v3_02a3_bf71c115-837d-488e-843c-4fdcba2c444g

Expected behavior

请求正常的chunk

Actual behavior

有怀疑过是由于微应用引入导致的问题,但是微应用引入时已经设置sandbox为true

 useEffect(() => {
    createMicroApp(
      {
        name: 'auth-center',
        loadScriptMode: 'fetch',
        activePath: path,
        cached: true,
        hashType: true,
        sandbox: true,
        url: window.projectConfig.microUrl,
        container: ref.current,
      },
      undefined,
      {
        shouldAssetsRemove: () => false,
        onLoadingApp: () => message.loading(''),
        onFinishLoading: () => message.destroy(),
      },
    );
  }, []);
  return (
    <div style={{ height: 'calc(100vh - 56px)' }} ref={containerRef}>
      <div ref={ref} style={{ height: size?.height }} />
    </div>
  );

主应用和微应用的package.json的name也分别为governance和auth-center,webpack5 会默认使用 package.json 的 name 作为 uniqueName 而且报错的页面是主应用的某个懒加载页面

Version of ice.js

2.6.6

Content of build.json or ice.config.mts

module.exports = {
  outputDir: `dist@v${version.version.replace(/\./g, '_')}`,
  hash: true,
  proxy: {
    '/api': {
      enable: true,
      changeOrigin: true,
      target: 'http://gateway-dev.com.cn:8000/',
      pathRewrite: {
        '^/api': '',
      },
    },
    /* 微前端 */
    '/ac-api': {
      enable: true,
      changeOrigin: true,
      target: 'http://ui-dev.com.cn:8000/',
    },
  },

  plugins: [
    'configplugin',
    [
      'build-plugin-ignore-style',
      {
        libraryName: 'antd',
      },
    ],
    ['build-plugin-keep-alive'],
    ['build-plugin-jsx-plus'],
    [
      'build-plugin-antd',
      {
        disableModularImport: true,
        themeConfig: {
          'primary-color': '#0069ff',
          'link-color': '#0069ff',
          'success-color': '#389e0d',
          'warning-color': '#fe823e',
          'error-color': '#fe3e3e',
          'border-color-base': '#e4e7ed',
          'border-radius-base': '4px',
        },
      },
    ],
  ],
};

Additional context

No response

ClarkXia commented 2 months ago

先确认加载的 chunk 地址对不对,如果 chunk 地址是上一个发布版本内容则考虑是否为缓存问题,hash 值可以试下 content-hash 的设置