mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
# 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]>
126 lines
4.1 KiB
TypeScript
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}` : "./",
|
|
};
|
|
});
|