diff --git a/frontend/index.html b/frontend/index.html index 16cf285d681..fac2cea2772 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -10,10 +10,10 @@ Jellyfin Vue - + - Jellyfin Logo + Jellyfin Logo diff --git a/frontend/scripts/plugins/chunking.ts b/frontend/scripts/plugins/chunking.ts new file mode 100644 index 00000000000..519175aeecd --- /dev/null +++ b/frontend/scripts/plugins/chunking.ts @@ -0,0 +1,44 @@ +import type { Plugin } from 'vite'; + +/** + * Creates the Rollup's chunking strategy of the application (for code-splitting) + */ +export function JellyfinVueChunking(): Plugin { + return { + name: 'Jellyfin_Vue:chunking', + config: () => ({ + build: { + rollupOptions: { + output: { + /** + * This is the first thing that should be debugged when there are issues + * withe the bundle. Check these issues: + * - https://github.com/vitejs/vite/issues/5142 + * - https://github.com/evanw/esbuild/issues/399 + * - https://github.com/rollup/rollup/issues/3888 + */ + manualChunks(id) { + const match = /node_modules\/([^/]+)/.exec(id)?.[1]; + + if (id.includes('virtual:locales') || ((id.includes('vuetify') || id.includes('date-fns')) && id.includes('locale'))) { + return 'localization/meta'; + } + + if (id.includes('@intlify/unplugin-vue-i18n/messages') + ) { + return 'localization/messages'; + } + + /** + * Split each vendor in its own chunk + */ + if (match) { + return `vendor/${match.replace('@', '')}`; + } + } + } + } + } + }) + }; +} diff --git a/frontend/src/components/lib/JSplashscreen.vue b/frontend/src/components/lib/JSplashscreen.vue index 18f24dfdebb..97461a4801b 100644 --- a/frontend/src/components/lib/JSplashscreen.vue +++ b/frontend/src/components/lib/JSplashscreen.vue @@ -6,7 +6,7 @@ src="./icon.svg" alt="Jellyfin Logo" loading="eager" - decoding="async"> + decoding="sync"> diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index c07d99c529c..fd4e661c917 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -18,6 +18,7 @@ import { defineConfig } from 'vite'; import { entrypoints, localeFilesFolder, srcRoot } from './scripts/paths'; import virtualModules from './scripts/virtual-modules'; import { JellyfinVueAnalysis } from './scripts/plugins/analysis'; +import { JellyfinVueChunking } from './scripts/plugins/chunking'; export default defineConfig({ appType: 'spa', @@ -25,6 +26,7 @@ export default defineConfig({ cacheDir: '../node_modules/.cache/vite', plugins: [ JellyfinVueAnalysis(), + JellyfinVueChunking(), Virtual(virtualModules), VueRouter({ dts: './types/global/routes.d.ts', @@ -64,7 +66,8 @@ export default defineConfig({ compositionOnly: true, fullInstall: false, forceStringify: true, - include: localeFilesFolder + include: localeFilesFolder, + dropMessageCompiler: true }), UnoCSS(), VueDevTools() @@ -77,7 +80,6 @@ export default defineConfig({ /** * Disable chunk size warnings */ - chunkSizeWarningLimit: Number.NaN, cssCodeSplit: true, cssMinify: 'lightningcss', modulePreload: false, @@ -89,28 +91,7 @@ export default defineConfig({ index: entrypoints.index }, output: { - chunkFileNames: (chunkInfo) => { - /** - * This is the default value: https://rollupjs.org/configuration-options/#output-chunkfilenames - */ - return chunkInfo.name === 'validation' ? 'assets/common-[hash].js' : '[name]-[hash].js'; - }, - validate: true, - /** - * This is the first thing that should be debugged when there are issues - * withe the bundle. Check these issues: - * - https://github.com/vitejs/vite/issues/5142 - * - https://github.com/evanw/esbuild/issues/399 - * - https://github.com/rollup/rollup/issues/3888 - */ - manualChunks(id) { - if ( - id.includes('virtual:locales') - || id.includes('@intlify/unplugin-vue-i18n/messages') - ) { - return 'assets/locales'; - } - } + validate: true } } },