Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

fix: add link rel=preload for exported sites #568

Merged
merged 3 commits into from Feb 17, 2019

Conversation

nolanlawson
Copy link
Contributor

I think sapper export should try to preserve the link rel=preload header as much as possible, which in this case means embedding it into the HTML.

Also I've found that preload makes a big enough difference in load time that it's worth it. (Just tested on Pinafore using simulated slow 3G, and it's a difference of 8.7s for the load event versus 59.9s. 😬)

I added a test using Webpack because it looks like none of the Rollup tests generate preload link headers.

@@ -139,38 +146,49 @@ async function _export({
clearTimeout(the_timeout); // prevent it hanging at the end

let type = r.headers.get('Content-Type');

let body = await r.text();

const range = ~~(r.status / 100);

if (range === 2) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hiding whitespace will make the diff below a lot easier to read.

@@ -0,0 +1,9 @@
import * as sapper from '@sapper/app';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copy-pasta'd the test/apps/export project into test/apps/export-webpack, changing only rollup.config.js by replacing it with webpack.config.js.


it('injects <link rel=preload> tags', () => {
const index = fs.readFileSync(`${__dirname}/__sapper__/export/index.html`, 'utf8');
assert.ok(/rel=preload/, index);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is probably more I could do to test this, but I wasn't sure if you wanted me to include an entire HTML parsing library or something. (Cheerio?)


it('injects <link rel=preload> tags', () => {
const index = fs.readFileSync(`${__dirname}/__sapper__/export/index.html`, 'utf8');
assert.ok(/rel=preload/.test(index));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is probably more I could do to test this, but I wasn't sure if you wanted me to include an entire HTML parsing library or something. (Cheerio?)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nah, that'd be overkill — this is what I'd have done as well 👍

@@ -0,0 +1,73 @@
const webpack = require('webpack');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I copy-pasted this config file over from the only other webpack text project, with-sourcemaps-webpack.


it('injects <link rel=preload> tags', () => {
const index = fs.readFileSync(`${__dirname}/__sapper__/export/index.html`, 'utf8');
assert.ok(/rel=preload/.test(index));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nah, that'd be overkill — this is what I'd have done as well 👍

@Rich-Harris
Copy link
Member

Fixes #402. Thanks!

@khrome83
Copy link

@nolanlawson - this appears to not be working anymore... Opened #919 around this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants