Bug/optimisation build/phase3 5

[benoitmignault]

This pull request introduces several improvements to the league-monteregie project, focusing on performance optimization, development tooling, and code quality. The main highlights are the implementation of lazy loading for route-based components to enhance app performance, and the addition of the rollup-plugin-visualizer for bundle analysis. There are also minor updates to ensure better environment compatibility and to ignore generated stats files.

Performance and Code Quality Improvements

• Implemented lazy loading for major route components (PlayerStats, Login, Dashboard) in App.jsx using React.lazy and Suspense, which will improve the application's initial load time by only loading code for the route being visited.
• Updated favicon path in HomePage.jsx to use import.meta.env.BASE_URL for better compatibility with different deployment environments.

Development Tooling and Dependency Updates

• Added rollup-plugin-visualizer to devDependencies in package.json and package-lock.json, along with all required sub-dependencies, to support bundle analysis and visualization. [1] [2] [3]
• Added a .gitignore rule for stats.html to avoid committing generated bundle analysis reports.
• Updated package-lock.json with new dependencies required by rollup-plugin-visualizer and its ecosystem (such as open, yargs, cliui, etc.), ensuring compatibility with recent Node.js versions. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]

[Copilot]

Pull request overview

This PR updates the league-monteregie Vite/React app to improve runtime performance (route/component lazy loading) and deployment compatibility (asset paths via import.meta.env.BASE_URL), while also introducing tooling for bundle analysis.

Changes:

• Added route-based lazy loading in src/App.jsx (with Suspense fallback) and component-level lazy loading in PlayerStats.
• Updated dynamic favicon URLs to use import.meta.env.BASE_URL for better base-path compatibility.
• Added rollup-plugin-visualizer plus lockfile updates, and ignored generated stats.html.

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
golf.benoitmignault.ca/league-monteregie/vite.config.js	Keeps base path configuration; attempts to wire in bundle visualizer (currently commented/ambiguous).
golf.benoitmignault.ca/league-monteregie/src/css/index.css	Updates background image URL paths.
golf.benoitmignault.ca/league-monteregie/src/components/stats/PlayerStats.jsx	Adds lazy loading for some sub-components and updates favicon to BASE_URL.
golf.benoitmignault.ca/league-monteregie/src/components/HomePage.jsx	Updates favicon to BASE_URL.
golf.benoitmignault.ca/league-monteregie/src/components/admin/Login.jsx	Imports admin CSS and updates favicon to BASE_URL.
golf.benoitmignault.ca/league-monteregie/src/components/admin/Dashboard.jsx	Updates favicon to BASE_URL.
golf.benoitmignault.ca/league-monteregie/src/App.jsx	Adds lazy loading for route components and wraps routes in Suspense.
golf.benoitmignault.ca/league-monteregie/package.json	Adds rollup-plugin-visualizer to devDependencies.
golf.benoitmignault.ca/league-monteregie/package-lock.json	Locks new dependency tree for the visualizer and its transitive deps.
golf.benoitmignault.ca/league-monteregie/.gitignore	Ignores generated stats.html output.

Files not reviewed (1)

• golf.benoitmignault.ca/league-monteregie/package-lock.json: Generated file

Comments suppressed due to low confidence (1)

golf.benoitmignault.ca/league-monteregie/vite.config.js:12

• Le plugin rollup-plugin-visualizer est ajouté en dépendance, mais l’intégration dans Vite est commentée et la ligne actuelle plugins: [react(), /* ... ] */ ], est ambiguë (le ] est dans le commentaire). Du coup, l’outil annoncé dans la description du PR n’est pas réellement activable proprement.

import { defineConfig } from 'vite'
// import { visualizer } from "rollup-plugin-visualizer";
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react(),  /* visualizer({open: true, gzipSize: true})] */ ],
  
  // Définir la base pour que les ressources soient correctement chargées 
  // même si l'application est servie à partir d'un sous-répertoire
  // Surtout que en PROD : https://golf.benoitmignault.ca/league-monteregie
  base: '/league-monteregie/'
})

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.