仅Safari v16.4.1出现Webpack构建的Vue/Laravel应用白屏问题求助

你的问题核心是Safari 16.4.1用户将应用添加到主屏幕（PWA模式）时，Webpack的代码分割加载逻辑抛出Promise拒绝错误，导致白屏。结合你的排查信息，以下是针对性的解决方案：

1. 彻底解决PWA缓存冲突问题 #

Safari PWA的独立缓存机制会留存旧资源，和新代码产生兼容问题：

• 在webpack.mix.js中启用资源版本哈希，确保每次更新后文件名唯一：

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .version(); // 自动生成带哈希后缀的资源文件

• 项目视图中必须使用Laravel的mix()函数加载资源，保证引用最新哈希文件：

<script src="{{ mix('js/app.js') }}"></script>

• 修改manifest.json，强制PWA启动时重新加载资源：

{
  "name": "你的应用名称",
  "short_name": "应用简称",
  "start_url": "/",
  "display": "standalone",
  "cache_mode": "reload"
}

2. 修复Webpack Chunk加载的兼容性 #

错误指向__webpack_require__.e（Webpack的chunk加载函数）的调用异常，和Safari 16.4.1的Promise处理或函数绑定兼容性有关：

• 降级Laravel Mix到4.x分支的稳定版本（4.0.7存在已知Safari兼容bug）：

npm install laravel-mix@4.0.16 --save-dev

• 添加Babel polyfill，针对Safari 16.4的特性补全：
  先安装依赖：

npm install @babel/preset-env core-js@3 --save-dev

然后修改webpack.mix.js：

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .babel({
     presets: [
       ['@babel/preset-env', {
         targets: { safari: '16.4' },
         useBuiltIns: 'usage',
         corejs: 3
       }]
     ]
   });

3. 隔离推送通知权限的影响 #

推送通知初始化可能在chunk加载完成前执行，触发未定义的引用：

• 将推送通知初始化逻辑延迟到应用完全挂载后执行：

// app.js中
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) }).use(plugin);
    app.mount(el);

    // 延迟1秒初始化推送，确保资源加载完成
    setTimeout(initPushNotifications, 1000);
  },
});

function initPushNotifications() {
  if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
      // 你的权限处理逻辑
    });
  }
}

• 检查推送相关代码是否依赖动态加载的模块，确保所有依赖都已提前加载。

4. 针对性调试Safari PWA #

让受影响的用户配合调试：

• 打开Safari的「开发」菜单，找到对应设备下的PWA应用，打开检查器
• 在Network面板查看chunk文件的加载状态，是否存在404或加载失败
• 在Console面板查看更详细的错误栈，定位具体的异常模块
• 在Application面板清理PWA缓存，验证是否是旧缓存导致的问题

内容的提问来源于stack exchange，提问作者StuBlackett