Merge pull request #3545 from opral/parjs-488-paraglide-slows-down-my-app-when-using-vite-test

Parjs-488-paraglide-slows-down-my-app-when-using-vite-test

Author: samuelstroschein

.changeset/long-flowers-kiss.md

@@ -0,0 +1,5 @@
+---
+"@inlang/paraglide-js": patch
+---
+
+make `output-structure: locale-modules` the default for dev builds https://github.com/opral/inlang-paraglide-js/issues/486

inlang/packages/paraglide/paraglide-js/docs-api/compiler-options.md

@@ -223,6 +223,10 @@ The `outputStructure` defines how modules are structured in the output.
 - `message-modules` - Each module is a message. This is the default.
 - `locale-modules` - Each module is a locale.
 
+It is recommended to use `locale-modules` for development and `message-modules` for production.
+Bundlers speed up the dev mode by bypassing bundling which can lead to many http requests
+during the dev mode with `message-modules`. See https://github.com/opral/inlang-paraglide-js/issues/486.
+
 **`message-modules`**
 
 Messages have their own module which eases tree-shaking for bundlers.

inlang/packages/paraglide/paraglide-js/src/bundler-plugins/unplugin.ts

@@ -21,19 +21,25 @@ export const unpluginFactory: UnpluginFactory<CompilerOptions> = (args) => ({
 	name: PLUGIN_NAME,
 	enforce: "pre",
 	async buildStart() {
-		logger.info("Compiling inlang project...");
+		const isProduction = process.env.NODE_ENV === "production";
+		// default to locale-modules for development to speed up the dev server
+		// https://github.com/opral/inlang-paraglide-js/issues/486
+		const outputStructure =
+			args.outputStructure ??
+			(isProduction ? "message-modules" : "locale-modules");
 		try {
 			previousCompilation = await compile({
 				fs: wrappedFs,
 				previousCompilation,
+				outputStructure,
 				// webpack invokes the `buildStart` api in watch mode,
 				// to avoid cleaning the output directory in watch mode,
 				// we only clean the output directory if there was no previous compilation
 				cleanOutdir: previousCompilation === undefined,
 				isServer,
 				...args,
 			});
-			logger.success("Compilation complete");
+			logger.success(`Compilation complete (${outputStructure})`);
 		} catch (error) {
 			logger.error("Failed to compile project:", (error as Error).message);
 			logger.info("Please check your translation files for syntax errors.");
@@ -50,6 +56,14 @@ export const unpluginFactory: UnpluginFactory<CompilerOptions> = (args) => ({
 			return;
 		}
 
+		const isProduction = process.env.NODE_ENV === "production";
+
+		// default to locale-modules for development to speed up the dev server
+		// https://github.com/opral/inlang-paraglide-js/issues/486
+		const outputStructure =
+			args.outputStructure ??
+			(isProduction ? "message-modules" : "locale-modules");
+
 		const previouslyReadFiles = new Set(readFiles);
 
 		try {
@@ -63,12 +77,13 @@ export const unpluginFactory: UnpluginFactory<CompilerOptions> = (args) => ({
 			previousCompilation = await compile({
 				fs: wrappedFs,
 				previousCompilation,
+				outputStructure,
 				cleanOutdir: false,
 				isServer,
 				...args,
 			});
 
-			logger.success("Re-compilation complete");
+			logger.success(`Re-compilation complete (${outputStructure})`);
 
 			// Add any new files to watch
 			for (const filePath of Array.from(readFiles)) {
@@ -99,17 +114,24 @@ export const unpluginFactory: UnpluginFactory<CompilerOptions> = (args) => ({
 		};
 
 		compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, async () => {
+			const isProduction = process.env.NODE_ENV === "production";
+			// default to locale-modules for development to speed up the dev server
+			// https://github.com/opral/inlang-paraglide-js/issues/486
+			const outputStructure =
+				args.outputStructure ??
+				(isProduction ? "message-modules" : "locale-modules");
 			try {
 				previousCompilation = await compile({
 					fs: wrappedFs,
 					previousCompilation,
+					outputStructure,
 					// clean dir needs to be false. otherwise webpack get's into a race condition
 					// of deleting the output directory and writing files at the same time for
 					// multi environment builds
 					cleanOutdir: false,
 					...args,
 				});
-				logger.success("Compilation complete");
+				logger.success(`Compilation complete (${outputStructure})`);
 			} catch (error) {
 				logger.warn("Failed to compile project:", (error as Error).message);
 				logger.warn("Please check your translation files for syntax errors.");

inlang/packages/paraglide/paraglide-js/src/compiler/compiler-options.ts

@@ -184,6 +184,10 @@ export type CompilerOptions = {
 	 * - `message-modules` - Each module is a message. This is the default.
 	 * - `locale-modules` - Each module is a locale.
 	 *
+	 * It is recommended to use `locale-modules` for development and `message-modules` for production.
+	 * Bundlers speed up the dev mode by bypassing bundling which can lead to many http requests
+	 * during the dev mode with `message-modules`. See https://github.com/opral/inlang-paraglide-js/issues/486.
+	 *
 	 * **`message-modules`**
 	 *
 	 * Messages have their own module which eases tree-shaking for bundlers.