Files
Stirling-PDF/frontend/vite.config.ts
T
3fe8adc5cb Switch key areas to lazily import to improve Vite chunk size (#6278)
# Description of Changes
Vite currently warns that when it's bundling our code that the chunk
size is way too high because most of the imports are static so it can't
split them into smaller chunks. This PR changes a few key areas to use
lazy imports to try and make the chunks as small as possible with
minimal code changes.

Vite's warnings kick in at minified chunks being >500kB, and we've got a
little way to go still to reach that, but we can keep chipping away at
this and I'd rather get the biggest wins done now. I've also included
Lighthouse scores because there's been discussion about improving ours
recently. It's not the aim of this PR to improve it, but it's nice that
it makes it a little better.

## Current main chunks

Build split into 12 chunks. Largest chunk in build is:

```
[frontend:build] dist/assets/index-B6JiWDxZ.js               5,175.51 kB │ gzip: 1,495.85 kB
```

<img width="1442" height="775" alt="image"
src="https://github.com/user-attachments/assets/b0e8a3fa-4ef3-4ccd-8c1d-bfed2d99bd27"
/>

Lighthouse score:

<img width="423" height="146" alt="before"
src="https://github.com/user-attachments/assets/c62056e8-2e77-49a6-a1ae-f08ec8021fb3"
/>

## This PR's chunks

Build split into 176 chunks. Largest chunk in build is:

```
[frontend:build] dist/assets/index-qCgeCY4B.js                              2,878.54 kB │ gzip:   861.03 kB
```

<img width="1447" height="776" alt="image"
src="https://github.com/user-attachments/assets/8d0c3cf0-cc25-41c3-b114-4940d3e99349"
/>

Lighthouse score:

<img width="402" height="145" alt="after"
src="https://github.com/user-attachments/assets/99a26eb3-bd15-4b92-bf22-82b58b458f52"
/>

---------

Co-authored-by: EthanHealy01 <[email protected]>
2026-05-01 15:21:06 +00:00

126 lines
4.1 KiB
TypeScript

import { defineConfig, loadEnv, type PluginOption } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
import { viteStaticCopy } from "vite-plugin-static-copy";
const VALID_MODES = [
"core",
"proprietary",
"saas",
"desktop",
"prototypes",
] as const;
type BuildMode = (typeof VALID_MODES)[number];
const TSCONFIG_MAP: Record<BuildMode, string> = {
core: "./tsconfig.core.vite.json",
proprietary: "./tsconfig.proprietary.vite.json",
saas: "./tsconfig.saas.vite.json",
desktop: "./tsconfig.desktop.vite.json",
prototypes: "./tsconfig.prototypes.vite.json",
};
export default defineConfig(async ({ mode }) => {
// Load env file based on `mode` in the current working directory.
// Set the third parameter to '' to load all env regardless of the
// `VITE_` prefix.
const env = loadEnv(mode, process.cwd(), "");
// Resolve the effective build mode.
// Explicit --mode flags take precedence; otherwise default to proprietary
// unless DISABLE_ADDITIONAL_FEATURES=true, in which case default to core.
const effectiveMode: BuildMode = (VALID_MODES as readonly string[]).includes(
mode,
)
? (mode as BuildMode)
: process.env.DISABLE_ADDITIONAL_FEATURES === "true"
? "core"
: "proprietary";
const tsconfigProject = TSCONFIG_MAP[effectiveMode];
// Backend proxy target: default localhost:8080. Override via BACKEND_URL env var
// so the top-level dev launcher can wire a dynamically-assigned backend port.
const backendUrl = process.env.BACKEND_URL || "http://localhost:8080";
const backendProxy = {
target: backendUrl,
changeOrigin: true,
secure: false,
xfwd: true,
};
return {
plugins: [
react(),
tsconfigPaths({
projects: [tsconfigProject],
}),
// Set ANALYZE=true to emit dist/stats.html (treemap) alongside the
// build; rollup-plugin-visualizer is ESM-only so we import dynamically.
...(process.env.ANALYZE === "true"
? [
(await import("rollup-plugin-visualizer")).visualizer({
filename: "dist/stats.html",
template: "treemap",
gzipSize: true,
brotliSize: true,
emitFile: false,
}) as PluginOption,
]
: []),
viteStaticCopy({
targets: [
{
//provides static pdfium so embedpdf can run without cdn
src: "node_modules/@embedpdf/pdfium/dist/pdfium.wasm",
dest: "pdfium",
},
{
// Copy jscanify vendor files to dist
src: "public/vendor/jscanify/*",
dest: "vendor/jscanify",
},
{
// pdfjs-dist CMap data for CJK / non-latin glyph mapping — required
// when rendering PDFs inside workers where the default DOM fetch paths
// aren't available.
src: "node_modules/pdfjs-dist/cmaps/*",
dest: "pdfjs/cmaps",
},
{
// pdfjs-dist standard font data (Helvetica/Times/etc.) — needed so
// workers can substitute non-embedded base 14 fonts without DOM access.
src: "node_modules/pdfjs-dist/standard_fonts/*",
dest: "pdfjs/standard_fonts",
},
],
}),
],
server: {
host: true,
// make sure this port matches the devUrl port in tauri.conf.json file
port: 5173,
// Tauri expects a fixed port, fail if that port is not available
strictPort: true,
watch: {
// tell vite to ignore watching `src-tauri`
ignored: ["**/src-tauri/**"],
},
// Only use proxy in web mode - Tauri handles backend connections directly
proxy:
effectiveMode === "desktop"
? undefined
: {
"/api": backendProxy,
"/oauth2": backendProxy,
"/saml2": backendProxy,
"/login/oauth2": backendProxy,
"/login/saml2": backendProxy,
"/swagger-ui": backendProxy,
"/v1/api-docs": backendProxy,
},
},
base: env.RUN_SUBPATH ? `/${env.RUN_SUBPATH}` : "./",
};
});