Vite迁移后React TypeScript项目嵌入iframe时的初始加载优化及postMessage事件丢失问题求助

大家好，我最近把我的React TypeScript项目从Create React App（CRA）+Webpack迁移到了Vite，开发体验确实提升了不少，但现在遇到两个棘手的问题，想请各位大佬给点思路：

1. 项目嵌入到第三方网站的iframe中时，初始加载速度变慢，比之前用CRA的时候慢了不少；
2. 因为加载延迟，我的应用经常错过宿主网站发送的postMessage——虽然我已经正确设置了addEventListener('message', ...)，但消息发过来的时候应用还没初始化完成，根本捕获不到。

问题补充说明 #

• 我已经反复确认postMessage的事件监听逻辑是正确的，问题根源就是iframe环境下的初始加载延迟；
• 构建项目时还收到了chunk过大的警告：

(!) Some chunks are larger than 500 kB after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

我的项目配置 #

React + TypeScript + Vite，vite.config.ts代码如下：

import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
import mkcert from 'vite-plugin-mkcert';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import fixReactVirtualized from 'esbuild-plugin-react-virtualized';
import envCompatible from 'vite-plugin-env-compatible';

const hostAppName = undefined;

export default defineConfig(({ mode }) => {
  return {
    envPrefix: 'REACT_APP_',
    base: '/',
    plugins: [
      react(),
      envCompatible(),
      tsconfigPaths(),
      svgr({}),
      mkcert(),
    ],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [fixReactVirtualized],
      },
    },
    server: {
      host: hostAppName,
      port: 3000,
      open: true,
    },
    preview: {
      port: 8080,
    },
    build: {
      outDir: 'build',
      modulePreload: false,
      target: 'esnext',
      minify: false,
      cssCodeSplit: false,
      sourcemap: true,
      rollupOptions: {
        onwarn(warning, defaultHandler) {
          if (warning.code === 'SOURCEMAP_ERROR') {
            return;
          }
          defaultHandler(warning);
        },
      },
    },
  };
});

已尝试的方案 #

• 完成了从CRA+Webpack到Vite的迁移；
• 调整过Vite的部分配置项试图优化加载速度；
• 多次验证postMessage的事件监听逻辑无误；
• 引入了mkcert、svgr等插件处理特定需求。

现在想请教大家：

1. 针对嵌入iframe的Vite项目，有没有推荐的初始加载速度优化方案？
2. 有没有可靠的策略能确保加载过程中不会错过postMessage事件？

感激各位的分享和建议！

备注：内容来源于stack exchange，提问作者Manspof