Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to strip out all JavaScript #962

Closed
hsribei opened this issue May 13, 2017 · 8 comments

Comments

@hsribei
Copy link
Contributor

commented May 13, 2017

Is there a way to output a pure HTML+CSS site without any client-side JS?

@hsribei hsribei changed the title Option to strip all JavaScript Option to strip out all JavaScript May 13, 2017

@fk

This comment has been minimized.

Copy link
Contributor

commented May 13, 2017

I haven't tried this myself, but while getting familiar with Gatsby I stumbled upon a bunch of great articles by Scott Nonnenberg in which he writes about this if I recall things correctly … yep, here they are:

His blog is open source, maybe a look into its https://github.com/scottnonnenberg/blog/blob/master/html.js can help you figuring things out.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented May 15, 2017

Why remove JavaScript? That disables your React components on the client, slows down page transitions, prevents service workers from preloading page data, etc.

In 0.x there's an command line flag to prevent the JavaScript from being written but I'm not inclined to support that in v1 as with code splitting, the amount of JS being loaded is quite small.

There's always the option though of just not putting the script tags in the HTML.

@hsribei

This comment has been minimized.

Copy link
Contributor Author

commented May 15, 2017

Why remove JavaScript? That disables your React components on the client, slows down page transitions, prevents service workers from preloading page data, etc.

Those are great optimizations that I agree definitely should be the default. What I'm thinking of is an optional flag to optimize for download size, aka the "feature phone in India on 2G" kind of scenario.

Ideally you could have "build targets" for different objective functions on separate URLs.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented May 15, 2017

feature phone in India on 2G

Afaik many Indian websites are using the same setup as Gatsby, React server rendered with service workers and client-side transitions :-)

See https://developers.google.com/web/showcase/2016/flipkart for example.

PWAs are faster and use less data than a normal website. It's a bit counterintuitive but in 2017, removing JavaScript makes your site slower and waste more data.

@hsribei

This comment has been minimized.

Copy link
Contributor Author

commented May 15, 2017

Counterintuitive indeed. Thank you for that reference. Clearly there's a lot I still need to learn about PWAs.

@huchenme

This comment has been minimized.

Copy link

commented Oct 23, 2017

seems PWA any works with HTTPS, and GitHub pages does not support SSL, is there any way to remove PWA in the code? I keep getting console errors about PWA issue for http pages

@iddan iddan referenced this issue Apr 18, 2018
1 of 2 tasks complete
@itmayziii

This comment has been minimized.

Copy link

commented Jun 27, 2019

I wrote a Gatsby plugin that removes Gatsby generated javascript for those that find this issue in the future

https://www.npmjs.com/package/gatsby-plugin-no-javascript

@kaishin

This comment has been minimized.

Copy link

commented Jul 20, 2019

Thanks for the plugin @itmayziii.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.