Preload js assets - fixes #408

runtime/src/server/middleware/get_page_handler.ts

@@ -50,7 +50,8 @@ export function get_page_handler(
 			bundler: 'rollup' | 'webpack',
 			shimport: string | null,
 			assets: Record<string, string | string[]>,
-			legacy_assets?: Record<string, string>
+			legacy_assets?: Record<string, string>,
+			script_preloads?: Record<string, string[]>
 		 } = get_build_info();
 
 		res.setHeader('Content-Type', 'text/html');
@@ -68,6 +69,16 @@ export function get_page_handler(
 			});
 		}
 
+		page.parts.forEach((part) => {
+			if (build_info.script_preloads && part && build_info.script_preloads[part.file]) {
+				build_info.script_preloads[part.file].forEach((preloadFile) => {
+					if (preloaded_chunks.indexOf(preloadFile) === -1) {
+						preloaded_chunks.push(preloadFile)
+					}
+				})
+			}
+		})
+
 		if (build_info.bundler === 'rollup') {
 			// TODO add dependencies and CSS
 			const link = preloaded_chunks

runtime/src/server/middleware/types.ts

@@ -11,6 +11,7 @@ export type Page = {
 	parts: Array<{
 		name: string;
 		component: Component;
+		file?: string;
 		params?: (match: RegExpMatchArray) => Record<string, string>;
 		preload?: (data: any) => any | Promise<any>;
 	}>

src/api/build.ts

@@ -93,6 +93,15 @@ export async function build({
 	});
 
 	const build_info = client_result.to_json(manifest_data, { src, routes, dest });
+	build_info.legacy_assets = client_result.assets;
+	build_info.script_preloads = {};
+	if (client_result.script_preloads) {
+		Object.keys(client_result.script_preloads).forEach((facadeFileName) => {
+			// get relative filename, remove / or \ from the beginning of the string
+			const relativeFacedeFileName = facadeFileName.replace(routes, '').slice(1);
+			build_info.script_preloads[relativeFacedeFileName] = client_result.script_preloads[facadeFileName];
+		})
+	}
 
 	if (legacy) {
 		process.env.SAPPER_LEGACY_BUILD = 'true';

src/core/create_compilers/RollupResult.ts

@@ -13,6 +13,7 @@ export default class RollupResult implements CompileResult {
 	warnings: CompileError[];
 	chunks: Chunk[];
 	assets: Record<string, string>;
+	script_preloads: Record<string, string[]>;
 	css_files: CssFile[];
 	css: {
 		main: string,
@@ -38,6 +39,22 @@ export default class RollupResult implements CompileResult {
 		// webpack, but we can have a route -> [chunk] map or something
 		this.assets = {};
 
+		this.script_preloads = {}
+		const entryChunk = compiler.chunks.find(ch => ch.isEntry)
+		const addImportsToScripsPreload = (facadeModuleId:string, chunk:Chunk) => {
+			chunk.imports.forEach((importItem:string) => {
+				if (this.script_preloads[facadeModuleId].indexOf(importItem) === -1) {
+					this.script_preloads[facadeModuleId].push(importItem);
+				}
+			})
+		}
+		compiler.chunks.forEach((chunk) => {
+			if (!chunk.isEntry && chunk.facadeModuleId) {
+				this.script_preloads[chunk.facadeModuleId] = [chunk.fileName, ...(entryChunk ? [entryChunk.fileName] : [])]
+				addImportsToScripsPreload(chunk.facadeModuleId, chunk)
+			}
+		})
+
 		if (typeof compiler.input === 'string') {
 			compiler.chunks.forEach(chunk => {
 				if (compiler.input in chunk.modules) {
@@ -116,4 +133,3 @@ function munge_warning_or_error(warning_or_error: any) {
 		message: [warning_or_error.message, warning_or_error.frame].filter(Boolean).join('\n')
 	};
 }
-

src/core/create_compilers/interfaces.ts

@@ -23,6 +23,7 @@ export interface CompileResult {
 	chunks: Chunk[];
 	assets: Record<string, string>;
 	css_files: CssFile[];
+	script_preloads: Record<string, string[]>;
 
 	to_json: (manifest_data: ManifestData, dirs: Dirs) => BuildInfo
 }
@@ -32,6 +33,7 @@ export type BuildInfo = {
 	shimport: string;
 	assets: Record<string, string>;
 	legacy_assets?: Record<string, string>;
+	script_preloads: Record<string, string[]>;
 	css: {
 		main: string | null,
 		chunks: Record<string, string[]>