Merge branch 'master' into chore/add-example-for-lazy-route

.changeset/pink-peas-drum.md

@@ -0,0 +1,5 @@
+---
+"react-starter-boilerplate": patch
+---
+
+Change type to module to disable warning about using cjs vite

.changeset/witty-pans-applaud.md

@@ -0,0 +1,5 @@
+---
+"react-starter-boilerplate": minor
+---
+
+Split sentry packages to a dedicated sentry chunk

.changeset/young-gorillas-help.md

@@ -0,0 +1,5 @@
+---
+"react-starter-boilerplate": minor
+---
+
+Add build:analyze command

.gitignore

@@ -29,4 +29,5 @@ e2e/node_modules
 e2e/scripts/**/*.js
 e2e/testsResults
 
-.credentials.json
+.credentials.json
+stats.html

README.md

@@ -78,6 +78,7 @@ npm run [command_name]
 - `start` - Launches the app in development mode on [http://localhost:3000](http://localhost:3000)
 - `build` - Compiles and bundles the app for deployment*
 - `build:ci` - Build command optimized for CI/CD pipelines
+- `build:analyze` - Builds the app and opens the rollup-plugin-visualizer report in the browser
 - `typecheck` - Validate the code using TypeScript compiler
 - `preview` - Boot up a local static web server that serves application build. It's an easy way to check if the production build looks OK on your local machine
 - `test` - Run unit tests with vitest

package.json

@@ -5,10 +5,12 @@
   "engines": {
     "node": ">=20"
   },
+  "type": "module",
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "build:ci": "cross-env VITE_CI=1 vite build",
+    "build:analyze": "cross-env ANALYZE=1 npm run build",
     "typecheck": "tsc --noEmit",
     "preview": "vite preview",
     "test": "vitest",
@@ -107,6 +109,7 @@
     "msw": "2.2.13",
     "plop": "4.0.1",
     "prettier": "3.1.1",
+    "rollup-plugin-visualizer": "5.12.0",
     "stylelint": "16.3.1",
     "stylelint-config-recommended": "14.0.0",
     "vite": "5.2.8",

vite.config.ts

@@ -1,9 +1,16 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type PluginOption } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
 import svgrPlugin from 'vite-plugin-svgr';
 import { configDefaults } from 'vitest/config';
 import { TanStackRouterVite } from '@tanstack/router-vite-plugin';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const manualChunks = (id: string) => {
+  if (id.includes('@sentry')) {
+    return 'sentry';
+  }
+};
 
 /* eslint-disable import/no-default-export */
 export default defineConfig({
@@ -14,13 +21,19 @@ export default defineConfig({
     viteTsconfigPaths(),
     svgrPlugin(),
     TanStackRouterVite(),
+    process.env.ANALYZE ? (visualizer({ open: true }) as PluginOption) : null,
   ],
   server: {
     open: true,
     port: 3000,
   },
   build: {
     outDir: 'build',
+    rollupOptions: {
+      output: {
+        manualChunks,
+      },
+    },
   },
   test: {
     globals: true,