Welcome to 16892 Developer Community-Open, Learning,Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I built a simple react app using Gatsby. All that the app does create a calender and show it to the screen. When I checked the performance of the app using LightHouse, I got 90% on desktop perf and 31% on mobile perf.

This is a bare bone site. I thought Gatsby would convert my react code to HTML and that is supposed to load blazing fast...

So I checked the html of the page, </script></head><body><div id="___gatsby"></div><script src="/polyfill.js" nomodule=""></script><script src="/commons.js"></script></body></html>

It looks like the whole page just runs from JS script; nothing is actually converted to HTML.

What did I do wrong? I ran the site using npm run develop?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
376 views
Welcome To Ask or Share your Answers For Others

1 Answer

When you run gatsby develop all page requests are served the barebones HTML shell that loads a development-targeted version of Gatsby that will render everything client-side only and integrates hot-module reloading1. No minification is performed on your source files this way, React is in development mode, and there are streaming connections opened to the dev server to listen for changes.

When you run gatsby build, Gatsby will create static HTML file entry points to each of your pages that contain the pre-rendered page in an optimized format. Each of your plugins should also produce optimized output, such as inlining critical CSS or generating minified CSS classnames. JavaScript will be tree-shaken, minified, and bundled in chunks by webpack, and React will be loaded in production mode.

If you'd like to test the performance of your Gatsby site before deploying, you can get a rough indicator by running gatsby build and then gatsby serve, then running your Lighthouse audit on that page. Keep in mind that this won't test the network or server performance of your live site, so it isn't going to match precisely (but should at least catch content related issues).


1 This is actually set to change starting with v2.3.0, which enables SSR during development.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to 16892 Developer Community-Open, Learning and Share
...