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

ice3.0约定式路由首次加载菜单时,css样式缺失 #6921

Closed LOL871230823 closed 2 days ago

LOL871230823 commented 2 weeks ago

Describe the bug

使用默认约定式路由,首次加载css样式缺失,路由切换后,再次返回正常加载 image image

使用配置式路由,首次可正常加载css样式 image image

image image

Expected behavior

使用约定式路由策略时,可正常加载css资源

Actual behavior

使用默认约定式路由,首次加载css样式缺失,路由切换后,再次返回正常加载 image image

Version of ice.js

3

Content of build.json or ice.config.mts

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';
import fusion from '@ice/plugin-fusion';
import store from '@ice/plugin-store';
import request from '@ice/plugin-request';
import { addLoader, modifyLoader, removeLoader } from '@ice/webpack-modify';
export default defineConfig(() => ({
  ssg: false,
  hash: 'contenthash',
  plugins: [
    fusion({
    }),
    icestark({ type: 'framework' }),
    store(),
    request(),
  ],
  routes: {
    ignoreFiles: [
      'custom.tsx',
      '**/components/**',   // 如果每个页面下有 components 目录存放当前页面的组件,可以通过添加此配置忽略被解析成路由组件
    ],
    defineRoutes: (route) => {
      route('/', 'home/index.tsx');
    },
    config: []
  },

  webpack: (webpackConfig:any) => {
    webpackConfig.module.rules.push(      {
      test: /\.(mp4|webm|ogg|mp3|wav|avi|mov|flac|aac|mpeg|woff|woff2|eot|ttf|otf)$/i,
      type: 'asset',
      generator: {
        filename: 'assets/[hash][ext][query]',
      },
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, // 小于10KB的文件将被内联为Base64
        },
      },
    },);

    return modifyLoader(webpackConfig, {
      rule: '.less',
      loader: 'less-loader',
      options: (originOptions) => ({
        lessOptions: {
          javascriptEnabled: true, // 正确配置javascriptEnabled的方式
        },
      }),
    });
  },
}));

Additional context

No response

ClarkXia commented 2 weeks ago

看下能不能把业务逻辑去掉,建议保留样式来提供一个复现 demo

ClarkXia commented 2 weeks ago

样式如果是分包出去的,应该会随路由响应异步加载进来

LOL871230823 commented 2 weeks ago

后续有时间了,会给你提供一个demo,先mark一下

LOL871230823 commented 3 days ago

1、初始化登录 image

2、登录后进入首页,约定式路由,首页样式显示异常 image

3、刷新后首页正常显示 image

4、首页-返回登录,登陆页样式显示异常 image

5、登录页-刷新后正常显示 image

下面是演示demo icestark-framework-dev.zip

LOL871230823 commented 3 days ago

@ClarkXia 辛苦大佬,尽快抽时间看一下

ClarkXia commented 2 days ago

微前端的场景 已回复 #6933