如何在Laravel+Vite中禁用代码拆分，打包单文件Firebase Service Worker

核心问题 #

Vite默认将入口文件当作ES模块处理，保留import语句，但Service Worker无法以模块方式运行，导致报错。需要将firebase-messaging-sw.js打包成无依赖引用的单一IIFE格式文件，且输出到public根目录、不带哈希文件名。

具体配置修改 #

修改vite.config.js，针对Service Worker入口单独配置Rollup输出规则：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            valetTls: 'whatever.test',
            // 将入口拆分为命名对象，方便单独配置
            input: {
                app: ['resources/css/app.css', 'resources/js/app.js'],
                'firebase-messaging-sw': 'resources/js/firebase-messaging-sw.js'
            },
            refresh: true,
            build: {
                rollupOptions: {
                    output: {
                        // 控制入口文件命名：给Service Worker输出无哈希的文件名
                        entryFileNames: chunk => {
                            return chunk.name === 'firebase-messaging-sw' 
                                ? '[name].js' 
                                : 'assets/js/[name].[hash].js';
                        },
                        // 强制Service Worker的所有依赖打包进单一文件，不拆分chunk
                        manualChunks: id => {
                            if (id.includes('firebase-messaging-sw')) {
                                return 'firebase-messaging-sw';
                            }
                        },
                        // 设置输出格式为IIFE，消除所有import语句
                        format: 'iife',
                        // 其他资源保持默认哈希命名规则
                        chunkFileNames: 'assets/js/[name].[hash].js',
                        assetFileNames: 'assets/[ext]/[name].[hash].[ext]'
                    }
                }
            }
        })
    ],
});

关键配置说明 #

• 命名入口：将input改为对象形式，给Service Worker单独命名，方便后续匹配处理。
• 无哈希文件名：通过entryFileNames判断chunk名称，给Service Worker输出不带哈希的firebase-messaging-sw.js，直接放在public根目录。
• IIFE格式：Rollup的format: 'iife'会将所有依赖打包成自执行函数，彻底消除import语句，符合Service Worker的运行要求。
• 强制单chunk：manualChunks确保Service Worker的所有依赖都打包进同一个文件，不会拆分出额外chunk。

注册Service Worker #

在前端代码中注册Service Worker时，直接使用根路径，无需@vite助手：

// 例如在resources/js/app.js中
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/firebase-messaging-sw.js')
            .then(registration => {
                console.log('SW registered: ', registration);
            })
            .catch(registrationError => {
                console.log('SW registration failed: ', registrationError);
            });
    });
}

验证打包结果 #

执行npm run build后，查看public目录，会生成firebase-messaging-sw.js文件，打开文件确认无import语句，所有Firebase依赖已被打包进文件。

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