laravel 如何在Vite和Rollup中完全禁用分块?

oxf4rvwz  于 2023-06-24  发布在  其他
关注(0)|答案(1)|浏览(104)

我在2019年退出实践后回到Laravel开发。我更习惯于Mix而不是Vite,但我喜欢Blade中的@vite助手。对于这个应用程序,我必须在根公共目录中提供一个Firebase服务worker,可以在https://example.com/firebase-messaging-sw.js访问。下面是我的vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel({
            valetTls: 'whatever.test',
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/firebase-messaging-sw.js'
            ],
            refresh: true,
        })
    ]
});

问题是firebase-messaging-sw.js使用import语句从node_modules中获取Firebase函数,这些函数最终也会在编译后的面向公共的文件中以缩小的胡言乱语形式结束。由于service worker不是作为模块引用的,因此“import”语句将失败。我所希望的是将该文件编译成一个单独的JavaScript文件,而在最终产品中没有导入。用Mix很简单:

const mix = require('laravel-mix');
mix.js('./build/firebase-messaging-sw.js', './public/firebase-messaging-sw.js');

但我已经陷得太深了,不能在这一点上切换到混合。我可以对我的配置做些什么,使Vite输出一个干净的文件,最好不带散列文件名?我看到了这一点,但它假设了比我更深入的Rollup知识,老实说,我不确定Laravel/Vite/Rollup之间的界限在这种情况下是如何划分的。这似乎是一个非常简单的问题,但我找不到最近的答案。
根据this answer,我尝试将vite.config.js更改为:

export default defineConfig({

    build: {
        rollupOptions: {
          output: {
            manualChunks: {}
          },
        }
    },

    plugins: [
        laravel({
            valetTls: 'whatever.test',
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/firebase-messaging-sw.js'
            ],
            refresh: true,
        })
    ],

});

但这对维特的产量没有影响。

ijnw1ujt

ijnw1ujt1#

我们可以使用'output.inlineDynamicImports关闭动态导入的分块:true`.问题是我们有几个输入不支持这个选项...
我没有找到比单独构建输入更好的解决方案:

  • --之后将输入文件作为参数传递给vite-cli(Vite不支持自定义参数)
  • 使用inlineDynamicImports动态更改您的Vite配置,以便一次仅处理1个输入文件
  • 设置emptyOutDir: false,这样一个版本就不会删除用另一个版本构建的文件。

OP带有几个配置文件,这也是一个有效的选项。
如何做到这一点:
如何使用类似于Webpack中的Multi Compiler模式(multi config)的Vite构建多个包

import { defineConfig } from 'vite';

const input = process.argv[4]?.split('=')?.[1];
if (input) {
    console.log('SINGLE INPUT PROVIDED: ' + input);
}

export default defineConfig(() => {
    return {
        build: {
            emptyOutDir: false,
            rollupOptions: {
                input: input || ['main.js', 'test.js'],
                output: {
                    [input ? 'inlineDynamicImports' : 'dummy']: true,
                    entryFileNames: input || ['main.js', 'test.js']
                }
            },
        },
    };
});

我的输出:

printf "test.js main.js" | xargs -d ' ' -P0 -I% npx vite build -- --input=%
SINGLE INPUT PROVIDED: main.js
SINGLE INPUT PROVIDED: test.js
vite v4.3.9 building for production...
vite v4.3.9 building for production...
✓ 5 modules transformed.
✓ 3 modules transformed.
dist/test.js  0.95 kB │ gzip: 0.59 kB
dist/assets/javascript-8dac5379.svg  1.00 kB │ gzip: 0.60 kB
dist/assets/vite-4a748afd.svg        1.50 kB │ gzip: 0.77 kB
dist/assets/main-48a8825f.css        1.24 kB │ gzip: 0.65 kB
dist/main.js                         0.75 kB │ gzip: 0.43 kB
✓ built in 67ms
✓ built in 68ms

相关问题