"npm run build" is slower than "npm run dev"

[muhammedkaraoglu]

Hello, first of all sorry for my English, I use google translate.

When I use "npm run dev", the translation process is done quickly without any problems, but when I do "npm run build", the file "php_tr.32683819.js" loads quite late depending on the internet speed. This causes "keys" to appear in the first opening of the page.

As seen in the picture, "php_tr.32683819.js" file is loaded 2000ms after the page is opened.

Dependencies "laravel-vue-i18n": "^2.2.2", "vite": "^3.0.0", "vue": "^3.2.31"

Laravel 9+

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import i18n from 'laravel-vue-i18n/vite';

export default defineConfig({

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        i18n(),
    ],
});

app.js

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        const captcheKey = props.initialPage.props.recaptcha_site_key;
        const application = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })
    ...

[muhammedkaraoglu]

Is this a problem or is it my fault? @xiCO2k

[xiCO2k]

Hey @muhammedkaraoglu can't find any relating with that delay, what is the filesize for that lang file?

[muhammedkaraoglu]

@xiCO2k public/build/assets/php_tr.32683819.js 11.00 KiB / gzip: 2.62 KiB

The important thing is the "components" and "app.js" loading before the lang file.

[xiCO2k]

if you want to make sure it is not a "lazyLoad" you can use the globEager instead.

Check the SSR import suggestion: https://github.com/xiCO2k/laravel-vue-i18n#ssr-server-side-rendering

[muhammedkaraoglu]

This worked for me, thanks a lot @xiCO2k .

[xiCO2k]

no problem anytime.