🔧 chore: Enhance Vite configuration with improved environment variable handling and chunking strategies

This commit is contained in:
Ruben Talstra 2025-02-27 16:34:16 +01:00
parent b46c0ed43f
commit 2fa8d40d11
No known key found for this signature in database
GPG key ID: 2A5A7174A60F3BEA

View file

@ -24,6 +24,7 @@ export default defineConfig({
}, },
}, },
}, },
// Set the directory where environment variables are loaded from and restrict prefixes
envDir: '../', envDir: '../',
envPrefix: ['VITE_', 'SCRIPT_', 'DOMAIN_', 'ALLOW_'], envPrefix: ['VITE_', 'SCRIPT_', 'DOMAIN_', 'ALLOW_'],
plugins: [ plugins: [
@ -31,10 +32,10 @@ export default defineConfig({
react(), react(),
tailwindcss(), tailwindcss(),
VitePWA({ VitePWA({
injectRegister: 'auto', injectRegister: 'auto', // 'auto' | 'manual' | 'disabled'
registerType: 'autoUpdate', registerType: 'autoUpdate', // 'prompt' | 'autoUpdate'
devOptions: { devOptions: {
enabled: false, enabled: false, // disable service worker registration in development mode
}, },
useCredentials: true, useCredentials: true,
workbox: { workbox: {
@ -85,7 +86,7 @@ export default defineConfig({
compression({ compression({
verbose: true, verbose: true,
disable: false, disable: false,
threshold: 10240, threshold: 10240, // compress files larger than 10KB
algorithm: 'gzip', algorithm: 'gzip',
ext: '.gz', ext: '.gz',
}), }),
@ -97,32 +98,42 @@ export default defineConfig({
minify: 'terser', minify: 'terser',
rollupOptions: { rollupOptions: {
preserveEntrySignatures: 'strict', preserveEntrySignatures: 'strict',
// external: ['uuid'],
output: { output: {
manualChunks(id: string) { manualChunks(id: string) {
if (id.includes('node_modules')) { if (id.includes('node_modules')) {
// Group Radix UI libraries together.
if (id.includes('@radix-ui')) { if (id.includes('@radix-ui')) {
return 'radix-ui'; return 'radix-ui';
} }
// Group framer-motion separately.
if (id.includes('framer-motion')) { if (id.includes('framer-motion')) {
return 'framer-motion'; return 'framer-motion';
} }
// Group markdown-related libraries.
if (id.includes('node_modules/highlight.js')) { if (id.includes('node_modules/highlight.js')) {
return 'markdown_highlight'; return 'markdown_highlight';
} }
if (id.includes('node_modules/hast-util-raw') || id.includes('node_modules/katex')) { if (id.includes('node_modules/hast-util-raw') || id.includes('node_modules/katex')) {
return 'markdown_large'; return 'markdown_large';
} }
// Group TanStack libraries together.
if (id.includes('@tanstack')) { if (id.includes('@tanstack')) {
return 'tanstack-vendor'; return 'tanstack-vendor';
} }
// Additional grouping for other node_modules:
if (id.includes('@headlessui')) { if (id.includes('@headlessui')) {
return 'headlessui'; return 'headlessui';
} }
// Everything else falls into a generic vendor chunk.
return 'vendor'; return 'vendor';
} }
// Create a separate chunk for all locale files under src/locales.
if (id.includes(path.join('src', 'locales'))) { if (id.includes(path.join('src', 'locales'))) {
return 'locales'; return 'locales';
} }
// Let Rollup decide automatically for any other files.
return null; return null;
}, },
entryFileNames: 'assets/[name].[hash].js', entryFileNames: 'assets/[name].[hash].js',
@ -134,6 +145,10 @@ export default defineConfig({
return 'assets/[name].[hash][extname]'; return 'assets/[name].[hash][extname]';
}, },
}, },
/**
* Ignore "use client" waning since we are not using SSR
* @see {@link https://github.com/TanStack/query/pull/5161#issuecomment-1477389761 Preserve 'use client' directives TanStack/query#5161}
*/
onwarn(warning, warn) { onwarn(warning, warn) {
if (warning.message.includes('Error when using sourcemap')) { if (warning.message.includes('Error when using sourcemap')) {
return; return;
@ -161,6 +176,7 @@ export function sourcemapExclude(opts?: SourcemapExclude): Plugin {
if (opts?.excludeNodeModules && id.includes('node_modules')) { if (opts?.excludeNodeModules && id.includes('node_modules')) {
return { return {
code, code,
// https://github.com/rollup/rollup/blob/master/docs/plugin-development/index.md#source-code-transformations
map: { mappings: '' }, map: { mappings: '' },
}; };
} }