diff --git a/CHANGELOG.md b/CHANGELOG.md index bb74c0f10..040623699 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ * Minify and hash inject_styles.js [#1524](https://github.com/sveltejs/sapper/pull/1524) * Fix support for legacy browsers [#1525](https://github.com/sveltejs/sapper/pull/1525) +* Improve performance by preloading `inject_styles.js` script [#1530](https://github.com/sveltejs/sapper/issues/1530) * Fix flash of unstyled content [#1531](https://github.com/sveltejs/sapper/issues/1531) * Fix duplicate CSS injection with both relative and absolute URLs [#1535](https://github.com/sveltejs/sapper/issues/1535) diff --git a/src/core/create_compilers/RollupCompiler.ts b/src/core/create_compilers/RollupCompiler.ts index 8b0c15c75..d0cab8773 100644 --- a/src/core/create_compilers/RollupCompiler.ts +++ b/src/core/create_compilers/RollupCompiler.ts @@ -228,7 +228,7 @@ export default class RollupCompiler { */ const sapper_internal: Plugin = { name: 'sapper-internal', - renderChunk(code: string, chunk: RenderedChunk) { + renderChunk(code: string, chunk: RenderedChunk) { that.chunks.push(chunk); return null; }, @@ -247,6 +247,16 @@ export default class RollupCompiler { return Array.from(dependenciesForTree(chunk, that.chunks, opts)); } + // It's hacky for the plugin to have to be aware of the style injection plugin + // However, there doesn't appear to be any more generic way of handling it + // https://github.com/rollup/rollup/issues/3790 + let inject_styles_file: string; + for (const key of Object.keys(bundle)) { + if (key.startsWith('inject_styles')) { + inject_styles_file = key; + } + } + // We need to handle the entry point separately // If there's a single page and preserveEntrySignatures is false then Rollup will // put everything in the entry point chunk (client.hash.js) @@ -262,8 +272,11 @@ export default class RollupCompiler { function add_dependencies(chunk: RenderedChunk) { for (const module of Object.keys(chunk.modules)) { if (is_route(module)) { - const js_dependencies = js_deps(chunk, + let js_dependencies = js_deps(chunk, { walk: ctx => !ctx.dynamicImport && ctx.chunk.fileName !== entry_chunk.fileName }).map(c => c.fileName); + if (inject_styles_file) { + js_dependencies = js_dependencies.concat(inject_styles_file); + } const css_dependencies = find_css(chunk, bundle).filter(x => !that.css_main || !that.css_main.includes(x)); dependencies[module] = js_dependencies.concat(css_dependencies); }