Experimental speed enhancements #67

Zorlin · 2025-05-24T16:36:39Z

Via Claude Code.

Great! The optimizations have significantly improved the bundle. The main index file went from 3.5MB to 117KB! Here's a summary of what was achieved:

  Bundle Size Improvements

  Before optimization:
  - Main bundle: 3,531.79 kB (3.5MB)

  After optimization:
  - Main bundle: 117.24 kB (88% reduction!)
  - Code is now split into multiple chunks
  - Lazy loading implemented for routes and heavy components

  Key Optimizations Implemented:

  1. Route-based code splitting: All routes except HomePage are now lazy loaded
  2. Manual chunking: Dependencies are split into logical chunks:
    - Vue core libraries
    - Vuetify UI framework
    - PeerBit/P2P libraries
    - SQLite database
    - Other vendor dependencies
  3. Component lazy loading:
    - Audio and video players load on demand
    - Featured slider loads asynchronously
  4. Build optimizations:
    - Terser minification enabled
    - Console logs removed in production
    - Source maps maintained for debugging
  5. HTML optimizations:
    - Preconnect hints for external resources
    - Font preloading for critical resources

  The largest remaining chunks (>500KB) are:
  - chunk-U59bhg-D.js (629KB) - Likely P2P/crypto libraries
  - chunk-nCzzmfih.js (1.27MB) - Likely the lens-sdk with all PeerBit dependencies

  These could be further optimized by lazy loading the P2P initialization until after the initial page load.

Zorlin · 2025-05-24T16:46:12Z

Great! The build is successful and the main bundle is now only 52KB (down from 3.5MB). The code is properly split into logical chunks.

  The optimizations have successfully:
  1. Reduced the main bundle from 3.5MB to 52KB (98.5% reduction)
  2. Split code into logical chunks that load on demand
  3. Avoided circular dependencies by using a smarter chunking strategy
  4. Maintained lazy loading for routes

  The deployment should now work without the initialization error. The largest chunks (>500KB) contain heavy dependencies like P2P libraries and the lens-sdk, which will only load when
   needed.

Copilot

Pull Request Overview

This PR implements experimental speed enhancements that significantly reduce the bundle size and improve load performance. Key changes include:

Lazy loading of non-critical routes and components.
Manual chunking and build optimizations in the Vite configuration.
Addition of preconnect and preload hints in the HTML for faster resource loading.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/renderer/vite.config.js	Updated build config with manual chunking, conditional sourcemaps, and Terser minification settings.
packages/renderer/src/plugins/router.ts	Converted route components to lazy loaded functions to optimize performance.
packages/renderer/src/App.vue	Adjusted component import ordering for audio and video players.
packages/renderer/indexBrowser.html	Added preconnect and preload tags to optimize external resource loading.

Comments suppressed due to low confidence (1)

packages/renderer/vite.config.js:84

[nitpick] Consider renaming the variable 'dépendsÀExclure' to use ASCII characters for consistency and to avoid potential issues in toolchains.

external: dépendsÀExclure,

Copilot · 2025-05-24T16:46:53Z

packages/renderer/vite.config.js

+          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk';
+          return `${facadeModuleId}-[hash].js`;


[nitpick] The generated chunk file names may collide if multiple modules have the same base name; consider incorporating additional identifiers to ensure uniqueness.

Suggested change

const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk';

return `${facadeModuleId}-[hash].js`;

const facadeModuleId = chunkInfo.facadeModuleId || 'chunk';

const baseName = facadeModuleId.split('/').pop();

const dirName = facadeModuleId.split('/').slice(-2, -1)[0] || 'unknown';

const sanitizedDirName = dirName.replace(/[^a-zA-Z0-9_-]/g, '');

return `${sanitizedDirName}-${baseName}-[hash].js`;

Zorlin added 2 commits May 24, 2025 17:35

Experimental speed enhancements

a84e8ee

Fix whitescreen

8dc231c

Zorlin requested a review from Copilot May 24, 2025 16:46

Copilot AI reviewed May 24, 2025

View reviewed changes

Zorlin added 7 commits May 24, 2025 17:49

Fix whitescreen

c157b00

Switch to mdi Vue package instead of Woff

5fce02f

Add MDI icons

406cd57

Update site address

03010fe

MDI fixes

37339e0

Linting fixes

576f8eb

Stop French translation warning

617dfde

Zorlin merged commit 617dfde into zorlin/peerbit-rewrite May 24, 2025
3 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Experimental speed enhancements #67

Experimental speed enhancements #67

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

		const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk';
		return `${facadeModuleId}-[hash].js`;

-          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk';
-          return `${facadeModuleId}-[hash].js`;
+          const facadeModuleId = chunkInfo.facadeModuleId || 'chunk';
+          const baseName = facadeModuleId.split('/').pop();
+          const dirName = facadeModuleId.split('/').slice(-2, -1)[0] || 'unknown';
+          const sanitizedDirName = dirName.replace(/[^a-zA-Z0-9_-]/g, '');
+          return `${sanitizedDirName}-${baseName}-[hash].js`;

Experimental speed enhancements #67

Experimental speed enhancements #67

Uh oh!

Conversation

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!