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 主应用切换到微应用,从微应用切回主应用,样式失效 #6891

Closed yyyyffqqqq closed 1 month ago

yyyyffqqqq commented 1 month ago

Describe the bug

ice3.0 主应用切换到微应用,从微应用切回主应用,样式失效

Expected behavior

样式正常

Actual behavior

No response

Version of ice.js

"@ice/app": "3.4.7"

Content of build.json or ice.config.mts

import { UserConfig, defineConfig } from '@ice/app';
import request from '@ice/plugin-request';
import store from '@ice/plugin-store';
import auth from '@ice/plugin-auth';
import i18n from '@ice/plugin-i18n';
import Icestark from '@ice/plugin-icestark';
import cssAssetsLocal from '@ice/plugin-css-assets-local';
import Unocss from '@ice/plugin-unocss';
import WorkboxWebpakcPlugin from 'workbox-webpack-plugin';
import WebpackPwaManifest from 'webpack-pwa-manifest';
import path from 'path';

const config: UserConfig = {
  ssg: false,
  // minify: process.env.NODE_ENV === 'production' ? 'swc' : false,
  minify: process.env.NODE_ENV === 'production',
  // hash: process.env.NODE_ENV === 'development' ? false : 'contenthash',
  hash: process.env.NODE_ENV !== 'development',
  // hash: false,
  codeSplitting: false,
  // codeSplitting: 'page',
  // codeSplitting: true,
  dropLogLevel: process.env.NODE_ENV === 'production' ? 'log' : false,
  // dropLogLevel: false,
  plugins: [
    request(),
    store({ resetPageState: false }),
    auth(),
    i18n({
      locales: ['zh-CN', 'en-US'],
      defaultLocale: 'zh-CN',
    }),
    cssAssetsLocal(),
    Unocss(),
    // 设置应用类型为框架应用 framework
    Icestark({ type: 'framework' }),
  ],
  crossOriginLoading: 'anonymous',
  compileDependencies: process.env.NODE_ENV !== 'development',
  webpack: (webpackConfig: any) => {
    if (process.env.NODE_ENV === 'production' && process.env.ICE_M_ENV !== 'micro') {
      const plugin = [
        new WorkboxWebpakcPlugin.GenerateSW({
          skipWaiting: true,
          clientsClaim: true,
        }),
        new WebpackPwaManifest({
          filename: 'pwa-manifest.json',
          name: '业务组件',
          short_name: '业务组件',
          description: '业务组件!',
          theme_color: '#123124',
          background_color: '#111',
          crossorigin: 'use-credentials', // can be null, use-credentials or anonymous
          icons: [
            {
              src: path.resolve('src/assets/logo.png'),
              sizes: [192, 512], // multiple sizes
            },
          ],
        }),
      ];
      webpackConfig.plugins?.push(...plugin);
    }
    return webpackConfig;
  },
  publicPath: `${process.env.ICE_PUBLIC_PATH}/`,
  devPublicPath: `${process.env.ICE_PUBLIC_PATH}/`,
  routes: {
    // ignoreFiles: process.env.ICE_M_ENV !== 'prod' && process.env.ICE_M_ENV !== 'test' ? [] : ['**'],
    // ignoreFiles: process.env.ICE_M_ENV === 'dev' ? [] : ['**/test/**/*.ts'],
    ignoreFiles: process.env.ICE_M_ENV === 'dev' || process.env.ICE_M_ENV === 'local' ? [] : ['**/test/**'],
    // 约定式路由不满足要求,使用自定义路由
    config: [
      // {
      //   path: '/',
      //   // 从 src/page 开始计算路径,并且需要写后缀。
      //   component: 'layout.tsx',
      // },
    ],
  },
};

// mock和proxy有冲突,如果运行的是mock模式,则不配置代理,否则配置代理
if (process.env.ICE_DISABLED_MOCK === 'false') {
  config.mock = {
    // 忽略 mock 目录中 custom 目录下的文件以及 api.ts 文件
    // exclude: ['custom/**', 'api.ts'],
  };
} else {
  config.proxy = {

  };
}

// console.log('config: ', config);

export default defineConfig(() => config);

Additional context

No response

ClarkXia commented 1 month ago

确认下被移除样式的特征,如果是因为主子应用有重复的样式文件导致,可以考虑通过以下 API 控制 https://micro-frontends.ice.work/docs/api/ice-stark/#shouldassetsremove

yyyyffqqqq commented 1 month ago

测试代码 ice3-antd5-dev.zip

yyyyffqqqq commented 1 month ago

确认下被移除样式的特征,如果是因为主子应用有重复的样式文件导致,可以考虑通过以下 API 控制 https://micro-frontends.ice.work/docs/api/ice-stark/#shouldassetsremove

更改这个属性没效果,这个是demo ice3-antd5-dev.zip

yyyyffqqqq commented 1 month ago

确认下被移除样式的特征,如果是因为主子应用有重复的样式文件导致,可以考虑通过以下 API 控制 https://micro-frontends.ice.work/docs/api/ice-stark/#shouldassetsremove

这样配置shouldAssetsRemove就正常了,但是shouldAssetsRemove不管返回false还是true,结果都正常了,不知道原因是什么。之前找不到shouldAssetsRemove在哪里配置

export const icestark = defineFrameworkConfig(() => ({
  // 用于微应用全局的 Layout
  layout: FrameworkLayout,
  // 配置微应用信息,可为异步方法
  getApps: () => ([{
    // path: '/test/micro1',
    activePath: '/test/micro1',
    title: '商家平台',
    sandbox: true,
    container: document?.getElementById('sub-app-layout') || undefined,
    cached: false,
    // Important!!
    // Use loadScriptMode: 'fetch' to load child app source code when child app is not build by vite.
    // Visit https://micro-frontends.ice.work/docs/api/ice-stark/#loadscriptmode- to get more details.
    loadScriptMode: 'import',
    prefetch: true,
    scriptAttributes: ['crossorigin=anonymous'],
    entry: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-ice-vite/index.html',
  },
    {
      activePath: '/test/angular',
      title: 'Angular',
      sandbox: true,
      cached: false,
      prefetch: true,
      scriptAttributes: ['crossorigin=anonymous'],
      // Angular app demo: https://github.com/ice-lab/icestark-child-apps/tree/master/child-common-angular
      entry: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-common-angular/index.html',
    },
  ]),
  // icestark 提供的 AppRouter 组件的配置参数
  appRouter: {
    basename: `${process.env.ICE_PUBLIC_PATH}`,
    shouldAssetsRemove: (assetUrl?: string, element?: HTMLElement | HTMLLinkElement | HTMLStyleElement | HTMLScriptElement) => {
      console.log('assetUrl: ', assetUrl);
      return false;
    },
    LoadingComponent: PageLoading,
    NotFoundComponent: () => {
      return <div>404</div>;
    },
  },
}));