diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07d265e..745955d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,19 @@
+## [v1.2.5] - 2025-09-14
+
+### Added
+
+- Implement comprehensive bundle optimization and code splitting (79fa266)
+
+### Fixed
+
+- Resolve typescript errors in vite config for pnpm es modules (cc42a21)
+- Resolve typescript errors in vue components (beebe25)
+
+### Maintenance
+
+- Prepare v1.2.5 hotfix (825a6f7)
+
+
 ## [v1.2.3] - 2025-09-14
 
 ### Fixed
diff --git a/src/App.vue b/src/App.vue
index 27f9908..497d8fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,16 @@
 <template>
   <div id="app" class="transition-colors duration-200">
     <router-view v-slot="{ Component, route }">
-      <transition 
-        :name="route.meta.transition || 'slide-left'" 
+      <transition
+        :name="(route.meta?.transition as string) || 'slide-left'"
         mode="out-in"
       >
-        <component :is="Component" :key="route.path" />
+        <Suspense>
+          <component :is="Component" :key="route.path" />
+          <template #fallback>
+            <LoadingSpinner />
+          </template>
+        </Suspense>
       </transition>
     </router-view>
   </div>
@@ -14,6 +19,7 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { useTheme } from '@/composables/useTheme'
+import LoadingSpinner from '@/components/LoadingSpinner.vue'
 
 // Initialize theme on app start
 const { initTheme } = useTheme()
diff --git a/src/components/BaseCard.vue b/src/components/BaseCard.vue
index b5ff1ea..4e5c811 100644
--- a/src/components/BaseCard.vue
+++ b/src/components/BaseCard.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 interface Props {
   variant?: 'default' | 'elevated' | 'outlined' | 'ghost'
@@ -58,6 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
   padding: 'md'
 })
 
+const slots = useSlots()
+
 // Base classes
 const baseClasses = 'relative transition-all duration-300'
 
@@ -143,7 +145,7 @@ const headerClasses = computed(() => [
 const contentClasses = computed(() => [
   {
     [paddingClasses[props.padding]]: props.padding !== 'none',
-    'pt-0': (props.$slots.header || props.title) && props.padding !== 'none'
+    'pt-0': (slots.header || props.title) && props.padding !== 'none'
   }
 ])
 
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index e93ee96..7e87768 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -204,8 +204,8 @@ const formatLanguageName = (lang: string): string => {
 }
 
 // Get badge variant based on language
-const getBadgeVariant = (lang: string) => {
-  const variantMap: Record<string, string> = {
+const getBadgeVariant = (lang: string): 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' => {
+  const variantMap: Record<string, 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'> = {
     'javascript': 'warning',
     'typescript': 'primary',
     'python': 'success',
@@ -218,7 +218,7 @@ const getBadgeVariant = (lang: string) => {
     'html': 'danger',
     'sql': 'success'
   }
-  
+
   return variantMap[lang] || 'default'
 }
 
diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue
new file mode 100644
index 0000000..9266c7d
--- /dev/null
+++ b/src/components/LoadingSpinner.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div class="text-center">
+      <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-pico-sky"></div>
+      <p class="mt-4 text-gray-600 dark:text-gray-400">{{ $t('loading') || 'Loading...' }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Simple loading component for route transitions
+</script>
diff --git a/src/i18n.ts b/src/i18n.ts
index 601f790..8bfc4bc 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,20 +1,35 @@
 import { createI18n } from 'vue-i18n'
-import en from './locales/en.json'
-import id from './locales/id.json'
 
-const messages = {
-  en,
-  id
+// Lazy load locale messages
+const loadLocaleMessages = async () => {
+  const modules = import.meta.glob('./locales/*.json')
+  const messages: Record<string, any> = {}
+
+  for (const path in modules) {
+    const mod = await modules[path]() as { default: any }
+    const locale = path.replace('./locales/', '').replace('.json', '')
+    messages[locale] = mod.default
+  }
+
+  return messages
 }
 
 // Get saved language or default to English
 const savedLanguage = localStorage.getItem('pico-language') || 'en'
 
+// Create i18n instance with lazy loading
 const i18n = createI18n({
   legacy: false,
   locale: savedLanguage,
   fallbackLocale: 'en',
-  messages
+  messages: {}
+})
+
+// Load messages asynchronously
+loadLocaleMessages().then(messages => {
+  Object.keys(messages).forEach(locale => {
+    i18n.global.setLocaleMessage(locale, messages[locale])
+  })
 })
 
 export default i18n
diff --git a/src/router/index.ts b/src/router/index.ts
index c8e3910..7b2683d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,4 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '@/views/Home.vue'
-import Documentation from '@/views/Documentation.vue'
-import ApiReference from '@/views/ApiReference.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -9,17 +6,17 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: () => import('@/views/Home.vue')
     },
     {
       path: '/docs',
       name: 'documentation',
-      component: Documentation
+      component: () => import('@/views/Documentation.vue')
     },
     {
       path: '/api',
       name: 'api-reference',
-      component: ApiReference
+      component: () => import('@/views/ApiReference.vue')
     }
   ]
 })
diff --git a/src/views/Documentation.vue b/src/views/Documentation.vue
index 0dc2c38..41b5efa 100644
--- a/src/views/Documentation.vue
+++ b/src/views/Documentation.vue
@@ -278,7 +278,7 @@ import AuthenticationSection from '@/components/documentation/AuthenticationSect
 import ErrorHandlingSection from '@/components/documentation/ErrorHandlingSection.vue'
 import GlossarySection from '@/components/documentation/GlossarySection.vue'
 
-const { t, locale } = useI18n()
+const { locale } = useI18n()
 
 // Version from package.json
 const version = packageJson.version
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 97ede7e..1a555ac 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -5,7 +5,8 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "strict": true,
+    "types": ["node"]
   },
   "include": ["vite.config.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 48d1d26..c7441d7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,21 +1,87 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
+import { fileURLToPath, URL } from 'node:url'
 
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src'),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
   build: {
     outDir: 'dist',
     assetsDir: 'assets',
+    sourcemap: false,
+    minify: 'terser',
+    target: 'esnext',
+    reportCompressedSize: false,
+    terserOptions: {
+      compress: {
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
     rollupOptions: {
       input: {
-        main: resolve(__dirname, 'index.html'),
+        main: fileURLToPath(new URL('./index.html', import.meta.url)),
+      },
+      output: {
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+        manualChunks: (id) => {
+          // Node modules vendor chunks
+          if (id.includes('node_modules')) {
+            // Vue core
+            if (id.includes('vue/') && !id.includes('vue-router') && !id.includes('vue-i18n')) {
+              return 'vue-vendor'
+            }
+            // Vue ecosystem
+            if (id.includes('vue-router') || id.includes('vue-i18n')) {
+              return 'vue-ecosystem'
+            }
+            // Code syntax highlighting and math
+            if (id.includes('prismjs') || id.includes('vue-prism-component') || id.includes('katex')) {
+              return 'syntax-vendor'
+            }
+            // Animation and UI libraries
+            if (id.includes('aos')) {
+              return 'ui-vendor'
+            }
+            // Other vendor libraries
+            return 'vendor'
+          }
+
+          // Components chunks
+          if (id.includes('src/components/documentation/')) {
+            return 'docs-components'
+          }
+          if (id.includes('src/components/')) {
+            return 'components'
+          }
+
+          // Locale chunks
+          if (id.includes('src/locales/')) {
+            return 'locales'
+          }
+        },
       },
     },
+    // Increase chunk size warning limit to 1000kB for vendor chunks
+    chunkSizeWarningLimit: 1000,
+    // Split chunks more aggressively
+    cssCodeSplit: true,
+  },
+  // Performance optimizations
+  optimizeDeps: {
+    include: [
+      'vue',
+      'vue-router',
+      'vue-i18n',
+      'prismjs',
+      'katex',
+      'aos'
+    ],
   },
 })