0.0.20

- Added vite-plugin-pwa for Progressive Web App capabilities.
- Configured service worker with caching strategies for improved offline support.
- Registered service worker in main.tsx to handle updates and caching.
- Updated package.json to include new dependencies for PWA functionality.

index.html

@@ -14,6 +14,10 @@
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="/lite.svg" />
     
+    <!-- DNS Prefetch & Preconnect for external APIs -->
+    <link rel="dns-prefetch" href="https://ipinfo.io">
+    <link rel="preconnect" href="https://ipinfo.io" crossorigin>
+    
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://litek.typist.cc/" />

package.json

@@ -1,7 +1,7 @@
 {
   "name": "litek",
   "private": true,
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -48,7 +48,9 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "npm:rolldown-vite@7.1.14"
+    "vite": "npm:rolldown-vite@7.1.14",
+    "vite-plugin-pwa": "^1.1.0",
+    "workbox-window": "^7.3.0"
   },
   "pnpm": {
     "overrides": {

src/components/tool/index.tsx

@@ -1,17 +1,22 @@
-import type { ReactNode } from 'react';
+import { lazy, type ReactNode, type ComponentType } from 'react';
 import { FileJson, Hash, Binary, Network, Globe, Activity, Gauge, Wifi, MapPin } from 'lucide-react'
 
-import UUID from './uuid'
-import JSON from './json'
-import Base64 from './base64'
-import { DNS, Ping, TCPing, SpeedTest, IPQuery } from './network'
+// 懒加载工具组件
+const UUID = lazy(() => import('./uuid'))
+const JSON = lazy(() => import('./json'))
+const Base64 = lazy(() => import('./base64'))
+const DNS = lazy(() => import('./network/dns'))
+const Ping = lazy(() => import('./network/ping'))
+const TCPing = lazy(() => import('./network/tcping'))
+const SpeedTest = lazy(() => import('./network/speedtest'))
+const IPQuery = lazy(() => import('./network/ipquery'))
 
 export interface Tool {
   path: string;
   name: string;
   icon: ReactNode;
   description: string;
-  component?: ReactNode;
+  component?: ComponentType;
   children?: Tool[];
 }
 
@@ -21,21 +26,21 @@ export const tools: Tool[] = [
     name: "UUID Generator",
     description: "Generate a UUID",
     icon: <Hash />,
-    component: <UUID />,
+    component: UUID,
   },
   {
     path: "json",
     name: "JSON Formatter",
     description: "Format and validate JSON",
     icon: <FileJson />,
-    component: <JSON />,
+    component: JSON,
   },
   {
     path: "base64",
     name: "Base64 Encoder/Decoder",
     description: "Encode and decode Base64",
     icon: <Binary />,
-    component: <Base64 />,
+    component: Base64,
   },
   {
     path: "network",
@@ -48,35 +53,35 @@ export const tools: Tool[] = [
         name: "DNS Lookup",
         description: "DNS query tool",
         icon: <Globe />,
-        component: <DNS />,
+        component: DNS,
       },
       {
         path: "ping",
         name: "Ping",
         description: "Ping test tool",
         icon: <Activity />,
-        component: <Ping />,
+        component: Ping,
       },
       {
         path: "tcping",
         name: "TCPing",
         description: "TCP port connectivity test",
         icon: <Wifi />,
-        component: <TCPing />,
+        component: TCPing,
       },
       {
         path: "speedtest",
         name: "Speed Test",
         description: "Website speed test",
         icon: <Gauge />,
-        component: <SpeedTest />,
+        component: SpeedTest,
       },
       {
         path: "ipquery",
         name: "IP Query",
         description: "Query IP location, quality and risk info",
         icon: <MapPin />,
-        component: <IPQuery />,
+        component: IPQuery,
       },
     ],
   },

src/components/tool/network/index.tsx

@@ -1,6 +0,0 @@
-export { default as DNS } from './dns';
-export { default as Ping } from './ping';
-export { default as TCPing } from './tcping';
-export { default as SpeedTest } from './speedtest';
-export { default as IPQuery } from './ipquery';
-

src/main.tsx

@@ -13,3 +13,21 @@ createRoot(document.getElementById('root')!).render(
     <Toaster />
   </StrictMode>
 )
+
+// 注册 Service Worker
+if ('serviceWorker' in navigator && import.meta.env.PROD) {
+  import('workbox-window').then(({ Workbox }) => {
+    const wb = new Workbox('/sw.js')
+    
+    wb.addEventListener('installed', (event) => {
+      if (event.isUpdate) {
+        console.log('New service worker installed, reloading page...')
+        window.location.reload()
+      }
+    })
+
+    wb.register()
+  }).catch((error) => {
+    console.error('Failed to register service worker:', error)
+  })
+}

src/router.tsx

@@ -1,3 +1,4 @@
+import { Suspense, createElement } from "react";
 import {
   createBrowserRouter,
   redirect,
@@ -8,6 +9,19 @@ import {
 import { tools, type Tool } from "@/components/tool";
 import { Layout } from "./layout";
 
+// 加载中的占位组件
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center h-full">
+    <div className="text-center flex flex-col items-center gap-3">
+      <div className="relative">
+        <div className="h-12 w-12 rounded-full border-4 border-muted"></div>
+        <div className="absolute top-0 left-0 h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin"></div>
+      </div>
+      <p className="text-sm text-muted-foreground font-medium">Loading...</p>
+    </div>
+  </div>
+);
+
 const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
   return tools.map((tool) => {
     const route: RouteObject = {
@@ -15,7 +29,12 @@ const buildToolRoutes = (tools: Tool[]): RouteObject[] => {
     };
 
     if (tool.component) {
-      route.element = tool.component;
+      // 使用 Suspense 包裹懒加载组件
+      route.element = (
+        <Suspense fallback={<LoadingFallback />}>
+          {createElement(tool.component)}
+        </Suspense>
+      );
     }
 
     if (tool.children && tool.children.length > 0) {

src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+

vite.config.ts

@@ -2,13 +2,81 @@ import path from "path"
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from "@tailwindcss/vite"
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(), 
+    tailwindcss(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['lite.svg', 'robots.txt', 'sitemap.xml'],
+      manifest: {
+        name: 'Lite Kit - Lightweight Online Tools',
+        short_name: 'Lite Kit',
+        description: 'Free online tools including UUID generator, JSON formatter, Base64 encoder/decoder, network testing tools and more',
+        theme_color: '#000000',
+        background_color: '#000000',
+        display: 'standalone',
+        icons: [
+          {
+            src: '/lite.svg',
+            type: 'image/svg+xml',
+            sizes: 'any'
+          }
+        ]
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'],
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/ipinfo\.io\/.*/i,
+            handler: 'NetworkFirst',
+            options: {
+              cacheName: 'ipinfo-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 5 // 5 分钟
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ],
+        cleanupOutdatedCaches: true,
+        clientsClaim: true,
+        skipWaiting: true
+      }
+    })
+  ],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          // React核心库
+          if (id.includes('node_modules/react') || 
+              id.includes('node_modules/react-dom') || 
+              id.includes('node_modules/react-router-dom')) {
+            return 'react-vendor';
+          }
+          // Radix UI组件
+          if (id.includes('node_modules/@radix-ui')) {
+            return 'ui-vendor';
+          }
+          // 图标库
+          if (id.includes('node_modules/lucide-react')) {
+            return 'icons';
+          }
+        },
+      },
+    },
+    chunkSizeWarningLimit: 500,
+  },
 })